/* estilos docxflow*/
/* RESET */

:root,
html,
body {
    --color--primary-hue: 25;
    --color--primary-saturation: 100%;
    --color--primary-lightness: 50;
    --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
    --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness)))));
    --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness)));
    /* Blue medium */
    --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness))))));
    --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness))))));
    --color-text-neutral-soft: var(--color--gray-45);
    --color-text-neutral-medium: var(--color--gray-20);
    --color-text-neutral-loud: var(--color--gray-5);
    --color-text-primary-medium: var(--color--primary-50);
    --color-text-primary-loud: var(--color--primary-40);

}


#rotating-bg-front-page {
    top: 1.5em;
    opacity: 1 !important;
}

#rotating-bg-front-page::before{
  background-image: url(../../images/BG-HOME-docx.png) !important;
}


#rotating-detail-footer::before {
    background-image: url(../../images/BG-HOME-footer-docx.png) !important;
}


.doxflow_h1 img {
    width: 80px;
    display: inline;
    background-color: #cecece;
    margin-right: 20px;
    margin-bottom: -15px;
    border-radius: 12px;
    box-shadow: 0 0 20px 15px #cecece;
    animation: pulse-shadow 2s infinite linear;
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 20px 15px #cecece;
        background-color: #cecece;
    }

    50% {
        box-shadow: 0 0 20px 15px #ffffff;
        background-color: #ffffff;
    }

    100% {
        box-shadow: 0 0 20px 15px #cecece;
        background-color: #cecece;
    }
}

.doxflow_img_logo {
    display: block;
    margin: auto;
    width: 13em
}

.doxflow_h1,
.doxflow_h2,
.doxflow_h3 {
    margin: 0 0 10px;
    text-align: center;
    font-weight: 600;
}

.doxflow_p {
    text-align: center;
}

/* HERO */
.doxflow_hero {
    text-align: center;
    padding: 3rem 1rem;
}

.doxflow_hero_content {
    margin: auto;
}

.doxflow_btn {
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
    margin: 0.5rem;
    border-radius: 6px;
}

.doxflow_btn:hover {
    transform: scale(1.05);
}

.doxflow_btn_primary {
    background: #ff6a00;
    color: #fff;
}

.doxflow_btn_primary:hover {
    background: #e65a00;
}

.doxflow_btn_secondary {
    background: transparent;
    border: 2px solid #ff6a00;
    color: #ff6a00;
}

.doxflow_btn_secondary:hover {
    background: #ff6a00;
    color: #fff;
}

/* FEATURES SLIDER */
.doxflow_features {
    padding: 4rem 1rem;
    background: #fafafa;
}


.doxflow_slide_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    min-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

.doxflow_feature {
    background: #fff;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s;
    color: #000000;
}

.doxflow_feature:hover {
    transform: translateY(-5px);
}

.doxflow_feature i {
    font-size: 2rem;
    color: #ff6a00;
    margin-bottom: 0.5rem;
}

/* SUCCESS SLIDER */
.doxflow_success {
    padding: 4rem 1rem;
    text-align: center;
}

.doxflow_slide {
    min-width: 90%;
    box-sizing: border-box;
    background: #ffffffa1;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin: 2% 5%;
    color: #575757;
}

.doxflow_slide h4 {
    padding: 0;
    margin: 0.5em 0 0 0;
}

.doxflow_slide p {
    font-style: italic;
    font-size: 1.1rem;
    margin-block-start: 0.5em !important;
    margin-block-end: 0.8em !important;
}

/* SLIDERS GENERAL */
.doxflow_slider {
    position: relative;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}

.doxflow_slides {
    display: flex;
    transition: transform 0.6s ease;
}

.doxflow_slider_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.doxflow_slider_btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.doxflow_prev {
    left: 10px;
}

.doxflow_next {
    right: 10px;
}

.doxflow_indicators {
    text-align: center;
    margin-top: 1rem;
}

.doxflow_indicators span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.doxflow_indicators .active {
    background: #ff6a00;
}

/* ANIMATIONS */
.doxflow_animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.doxflow_animate.visible {
    opacity: 1;
    transform: translateY(0);
}


/* TIMELINE */
.doxflow_timeline {
    padding: 4rem 1rem;
    text-align: center;
    position: relative;
}

.doxflow_timeline_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
}

/* Línea vertical naranja */
.doxflow_timeline_container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50% !important;
    width: 20%;
    background: #ff6a00;
    transform: translateX(-50%);
    margin-left: -5%;
    margin-top: -11px;
    height: 4px;
}

/* Items */
.doxflow_timeline_item {
    width: 45%;
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    margin: 2rem 0;
}

.doxflow_timeline_item h3 {
    color: #ff6a00;
    margin-bottom: 1rem;
}

.doxflow_timeline_item ul {
    list-style: none;
    padding: 0;
    margin: auto;
    display: table;
}

.doxflow_timeline_item li {
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 1.2rem;
}

.doxflow_timeline_item li::before {
    content: "•";
    color: #ff6a00;
    position: absolute;
    left: 0;
}

/* Alternar lados */
.doxflow_timeline_item.before {
    margin: 0 5% 0 0;
    width: 45%;
}

.doxflow_timeline_item.after {
    margin: 0 0 0 5%;
    width: 45%;
}

/* Puntos naranjas con pulso */
.doxflow_timeline_item::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff6a00;
    border: 3px solid #fff;
    left: 100% !important;
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.3);
    animation: pulse 1.8s infinite;
}

.doxflow_timeline_item.after::before {
    left: 0% !important;
    transform: translateX(-50%);
}

/* Animación pulso */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.6);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 106, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 106, 0, 0);
    }
}

/* Imagen dentro de cada item */
.doxflow_timeline_img {
    margin-top: 1rem;
}

.doxflow_timeline_img img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .doxflow_timeline_container::before {
        left: 20px;
    }

    .doxflow_timeline_item {
        width: 100%;
        left: 0 !important;
        text-align: left;
        padding-left: 2.5rem;
    }

    .doxflow_timeline_item::before {
        left: 0;
        transform: translateX(-50%);
    }
}

/* Ajuste de grid para mobile en Features Slider */
@media (max-width: 800px) {
    .doxflow_features .doxflow_slide_grid {
        grid-template-columns: 1fr;
        /* Cada slide mostrará solo 3 items en una columna */
    }

    /* Opcional: reducir padding y gap para mejor visual en móvil */
    .doxflow_features .doxflow_slide_grid {
        gap: 1rem;
        padding: 0.5rem;
    }

    /* Mantener consistencia de tamaño de iconos y textos */
    .doxflow_features .doxflow_feature i {
        font-size: 1.8rem;
    }

    .doxflow_features .doxflow_feature h3,
    .doxflow_features .doxflow_feature p {
        font-size: 0.95rem;
    }
}


/* NUBE DE PALABRAS*/

:root {
    /* gama de naranjas */
    --orange-1: hsl(24 95% 55%);
    --orange-2: hsl(28 92% 49%);
    --orange-3: hsl(30 88% 45%);
    --orange-4: hsl(22 85% 60%);
    --orange-5: hsl(34 88% 52%);
    --orange-6: hsl(18 90% 50%);
    --orange-7: hsl(26 80% 47%);
    --orange-8: hsl(20 78% 40%);
    --orange-9: hsl(32 80% 43%);
    --orange-10: hsl(14 85% 53%);
    --orange-11: hsl(36 78% 46%);
    --orange-12: hsl(16 88% 48%);
    --orange-13: hsl(29 82% 44%);
    --orange-14: hsl(24 82% 41%);
    --orange-15: hsl(27 90% 38%);
}

.wordcloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 90vw;
    gap: 6px;
    font-family: var(--font-sans);
    padding-top: 3em;
    text-align: center;
    animation: cloudBreath 20s ease-in-out infinite alternate;
    background-color: #ffdcc3;
    box-shadow: 0 0 100px 100px #ffdcc3;
    border-radius: 50%;
    z-index: 0;
    position: relative;
    text-shadow: 0 1px 0 white, 0 1px 0 white;
    text-transform: uppercase;
}

.word {
    font-weight: 600;
    line-height: 1.1;
    cursor: default;
    user-select: none;
    animation: float 12s ease-in-out infinite alternate;
    transition: transform 0.3s;
}

.word:hover {
    transform: scale(1.08);
}

/* tamaños */
.small {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
}

.medium {
    font-size: clamp(1rem, 2vw, 1.4rem);
}

.large {
    font-size: clamp(1.2rem, 3vw, 2rem);
}

.xlarge {
    font-size: clamp(1.4rem, 4vw, 2.4rem);
}

/* colores */
.c1 {
    color: var(--orange-1);
}

.c2 {
    color: var(--orange-2);
}

.c3 {
    color: var(--orange-3);
}

.c4 {
    color: var(--orange-4);
}

.c5 {
    color: var(--orange-5);
}

.c6 {
    color: var(--orange-6);
}

.c7 {
    color: var(--orange-7);
}

.c8 {
    color: var(--orange-8);
}

.c9 {
    color: var(--orange-9);
}

.c10 {
    color: var(--orange-10);
}

.c11 {
    color: var(--orange-11);
}

.c12 {
    color: var(--orange-12);
}

.c13 {
    color: var(--orange-13);
}

.c14 {
    color: var(--orange-14);
}

.c15 {
    color: var(--orange-15);
}

/* animaciones */
@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(6px);
    }
}

@keyframes cloudBreath {
    0% {
        opacity: 0.5;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.6);
    }

    75% {
        opacity: 0.3;
        transform: scale(0.7);
    }

    100% {
        opacity: 0.5;
        transform: scale(0.5);
    }
}