:root {
    --primary: #1D4276;
    --primary-dark: #1E2F52;
    --primary-light: #6190d1;
    --bg-light: #ffffff;
    --bg-dark: #0f172a;
    --text-light: #5E5F61;
    --text-muted: #64748b;
    --text-dark: #f1f5f9;
    --border-light: rgba(203, 213, 225, 0.3);
    --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .color-dd{
    color: #27AF8B;
  }
  .color-md{
    color: #0089D2;
  }
  .color-vd{
    color: #A91E07;
  }
  .color-cd{
    color: #1D4276;
  }
  .color-dda{
    color: #EF7F37;
  }
  .color-int{
    color: #006397;
  }
.hero-productos-dentidesk{
    display: flex;
    flex-direction: column;
    padding: 0 17rem;
    margin-top: 10%;
    align-items: center;
}
.hero-productos-dentidesk .prod-logo-dd{
    width: 13rem;
    margin-bottom: .5rem;
}
.hero-productos-dentidesk h1{
    font-size: 6rem;
    text-align: center;
    background: linear-gradient(135deg, #036e52 0%, #27AF8B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -30px;
    margin-bottom: 2%;
}
.hero-productos-dentidesk p{
    color: var(--text-muted);
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}
.prod-btn-dd{
    margin-bottom: 5%;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, #27AF8B 0%, #036e52 100%);
    color: white;
    border: none;
    text-decoration: none;
    border-radius: 40px;
    font-weight: 400;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 4px 6px -1px rgba(75, 74, 73, 0.3);
}
.prod-btn-dd:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(255, 166, 0, 0.5);
}
.mockup-dd{
    width: 100%;
}

/* ----------------------------------------------------------Seccion dos DENTIDESK--------------------------------------------------------- */
.prod-sec-dos-resumen{
    display: flex;
    padding: 8rem 17rem 4rem 17rem;
    align-items: flex-start;
    gap: 2rem;
}
.prod-sec-dos-resumen-left{
    width: 50%;
}
.prod-sec-dos-resumen-left h2{
    font-size: 4rem;
    background: linear-gradient(135deg, #27AF8B 0%, #036e52 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.prod-sec-dos-resumen-right{
    width: 50%;
}

/* ------------------------------------------------------------Seccion tres DENTIDESK---------------------------------------------------------- */
.prod-sec-tres{
    min-height: auto;
    overflow-x: hidden;
    padding: 3rem 17rem;
}
.container {
    width:  100%;
    margin: 0 auto;
}
.nav-bar {
    width: 100%;
    border-radius: 50px;
    padding: .8rem;
    display: flex;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    margin-bottom: 1rem;
}
.nav-bar img{
    width: 2rem;
    display: none;
}
.nav-btn {
    padding: .8rem 1rem;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--text-muted);
    font-size: .9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.nav-btn:hover {
    background: var(--text-dark);
}
.nav-btn.active {
    background: #27AF8B;
    color: white;
}
.slider-container {
    position: relative;
    width: 100%;
}
.slider-wrapper {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 20px;
}
.slide {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width:  50rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.5s ease;
    margin-top: 2rem;
}

.slide.prev {
    opacity: 0.3;
    transform: scale(0.9) translateY(40px); 
}
.slide.next {
    opacity: 0.3;
    transform: scale(0.9) translateY(40px);
}
.slide.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 1;
}
.view-content {
    text-align: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 3rem);
    left: 1.5rem;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}
.arrow-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    transition: all 0.3s ease;
}
.arrow-btn:hover {
    background: #10b981;
    color: white;
    transform: scale(1.1);
}
.arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.arrow-btn:disabled:hover {
    background: white;
    color: #666;
    transform: scale(1);
}
.dots-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 3rem;
}
.dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: rgba(128, 221, 164, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}
.dot.active {
    background: #27AF8B;
    width: 2rem;
    border-radius: 5px;
}
.view-content img{
    width: 100%;
    height: 100%;
    border-radius:1rem;
}
/* ----------------------------------------------------------Seccion cuatro DENTIDESK----------------------------------------- */
.prod-sec-cuatro{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 17rem;
}
.prod-sec-cuatro h2{
    font-size: 3rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #27AF8B 0%, #036e52 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.prod-sec-cuatro-beneficios{
    display: flex;
    margin-top: 4rem;
    gap: 2rem;
    margin-bottom: 4rem;
}
.prod-beneficios{
    width: 33%;
    display: flex;
    flex-direction: column;
}
.prod-beneficios img{
    width: 4rem;
    margin: 0 auto 1rem auto;
}
.prod-beneficios h4{
    text-align: center;
    color: #27AF8B;
    font-size: 1.2rem;
}
.prod-beneficios p{
    text-align: center;
}

/* -----------------------------------------------------------Sección CTA---------------------------------------------------------- */
.prod-cta-dd{
    padding: 3rem 17rem;
    text-align: center;
    background: url("/dominios/udesk/assets/imgs-prods/cta-dd.png") no-repeat;
    background-size: cover;
    margin-top: 6rem;
    margin-bottom: 2rem;
}
.prod-cta-dd h4{
    font-size: 3rem;
    color: white;
    margin-top: 4rem;
}
.prod-cta-dd p{
    color: white;
    margin-top: 1rem;
}
.prod-cta-dd-buttons{
    display: flex;
    gap: 3rem;
    justify-content: center;
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.prod-cta-dd-buttons img{
    width: 1rem;
}
.prod-btn-cta-dd{
    display: flex;
    padding: 0.625rem 1.5rem;
    background: white;
    color: #27AF8B;
    border: none;
    text-decoration: none;
    border-radius: 40px;
    font-weight: 400;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 4px 6px -1px rgba(75, 74, 73, 0.3);
    align-items: center;
    gap: 1rem;
}
.prod-btn-cta-dd-demo{
    display: flex;
    padding: 0.625rem 1.5rem;
    background: #EF7F37;
    color: white;
    border: none;
    text-decoration: none;
    border-radius: 40px;
    font-weight: 400;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 4px 6px -1px rgba(75, 74, 73, 0.3);
    align-items: center;
    gap: 1rem;
}
/* ===========================================RESPONSIVE DD=============================================== */
@media (max-width: 1800px) {
    .hero-productos-dentidesk{
    padding: 4rem 5rem;
}
.hero-productos-dentidesk .prod-logo-dd{
    margin-bottom: .8rem;
}
.mockup-dd{
    width: 80%;
}

/* ----------------------------------------------------------Seccion dos DENTIDESK--------------------------------------------------------- */
.prod-sec-dos-resumen{
    padding: 4rem 5rem 4rem 5rem;
    gap: 2rem;
}

/* ------------------------------------------------------------Seccion tres DENTIDESK---------------------------------------------------------- */
.prod-sec-tres{
    padding: 3rem 5rem;
}
/* ----------------------------------------------------------Seccion cuatro DENTIDESK----------------------------------------- */
.prod-sec-cuatro{
    padding: 3rem 5rem;
}
}
/* ------------------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .hero-productos-dentidesk{
    padding: 2rem 3rem;
    margin-top: 15%;
}
.hero-productos-dentidesk .prod-logo-dd{
    width: 18rem;
    margin-bottom: .8rem;
}
.hero-productos-dentidesk h1{
    font-size: 5rem;
    margin-top: .6rem;
    line-height: 1;
}
.mockup-dd{
    width: 90%;
}

/* ----------------------------------------------------------Seccion dos DENTIDESK--------------------------------------------------------- */
.prod-sec-dos-resumen{
    flex-direction: column;
    padding: 4rem 3rem;
}
.prod-sec-dos-resumen-left{
    width: 100%;
}
.prod-sec-dos-resumen-right{
    width: 100%;
}

/* ------------------------------------------------------------Seccion tres DENTIDESK---------------------------------------------------------- */
.prod-sec-tres{
    padding: 1rem 3rem;
}
.container {
    width:  100%;
    margin: 0 auto;
}
.nav-bar span{
    display: none;
}
.nav-bar img{
    display: block;
}

/* ----------------------------------------------------------Seccion cuatro DENTIDESK----------------------------------------- */
.prod-sec-cuatro{
    padding: 3rem 3rem;
}

/* -----------------------------------------------------------Sección CTA---------------------------------------------------------- */
.prod-cta-dd{
    padding: 3rem;
}
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 768px) {
   .hero-productos-dentidesk{
    padding: 1rem;
    margin-top: 25%;
}
.hero-productos-dentidesk .prod-logo-dd{
    width: 9rem;
    margin-bottom: 2rem;
}
.hero-productos-dentidesk h1{
    font-size: 2rem;
}
.hero-productos-dentidesk p{
    margin-top: .5rem;
    font-size: .8rem;
}
.prod-btn-dd{
    font-size: 0.8rem;
}
.mockup-dd{
    width: 90%;
    margin-top: 2rem;
}

/* ----------------------------------------------------------Seccion dos DENTIDESK--------------------------------------------------------- */
.prod-sec-dos-resumen{
    flex-direction: column;
    padding: 1rem;
}
.prod-sec-dos-resumen-left{
    width: 100%;
}
.prod-sec-dos-resumen-left h2{
    font-size: 2rem;
}
.prod-sec-dos-resumen-right{
    width: 100%;
}
.prod-sec-dos-resumen-right p{
    font-size: .8rem;
}

/* ------------------------------------------------------------Seccion tres DENTIDESK---------------------------------------------------------- */
.prod-sec-tres{
    padding: 1rem;
}
.nav-bar {
    padding: .8rem;
    gap: .4rem;
    justify-content: space-between;
}
.nav-bar img{
    width: 1rem;
    display: block;
}
.nav-btn {
    padding: .3rem .4rem;
}
.slider-container {
    position: relative;
    width: 100%;
}
.slide {
    width:  95%;
}
.nav-arrows {
    top: 90%;
}
.arrow-btn {
    width: 1.2rem;
    height: 1.2rem;
}

/* ----------------------------------------------------------Seccion cuatro DENTIDESK----------------------------------------- */
.prod-sec-cuatro{
    padding: 1rem;
    margin-top: 2rem;
}
.prod-sec-cuatro h2{
    font-size: 2rem;
    line-height: 1;
}
.prod-sec-cuatro p{
    font-size: .8rem;
}
.prod-sec-cuatro-beneficios{
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
    margin-bottom: 2rem;
}
.prod-beneficios{
    width: 95%;
}
.prod-beneficios img{
    width: 3rem;
    margin: 0 auto;
}
.prod-beneficios h4{
    font-size: 1rem;
}
.prod-beneficios p{
    font-size: .8rem;
}

/* -----------------------------------------------------------Sección CTA---------------------------------------------------------- */
.prod-cta-dd{
    padding: 1rem;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2rem;
}
.prod-cta-dd h4{
    font-size: 1.8rem;
    line-height: 1.1;
    margin-top: 2rem;
}
.prod-cta-dd p{
    margin-top: 1rem;
    font-size: .8rem;
}
.prod-cta-dd-buttons{
    gap: .5rem;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.prod-cta-dd-buttons img{
    width: 1rem;
}
.prod-btn-cta-dd{
    padding: 0.3rem .8rem;
    font-size: 0.7rem;
    gap: .2rem;
}
.prod-btn-cta-dd-demo{
    padding: 0.3rem .8rem;
    font-size: 0.7rem;
    gap: .2rem;
}
}