@media all and (min-width: 1200px){
    .color-white-only-desk, .header-area .main-nav .nav li a{
        color:white !important;
    }
}

@media all and (max-width: 450px){
    .title-low-movil{
        font-size: 30px !important;
    }
}

/* =============================================== */
/* #61 · Skip-link (saltar al contenido)           */
/* Oculto fuera de pantalla hasta recibir foco por  */
/* teclado (no display:none, para que sea anunciado).*/
/* =============================================== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: #A87ED8;
    color: #fff !important;
    font-weight: 800;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* =============================================== */
/* SPRINT DCISWEB-1/2/3 — Fixes globales          */
/* =============================================== */

/* Prevenir scroll horizontal en todos los viewports (DCISWEB-3 #1) */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Logo: reducir en mobile (DCISWEB-3 #7) */
@media (max-width: 767px) {
    .header-area .logo .logo-img {
        width: 120px !important;
        max-width: 120px !important;
    }
}

/* Touch targets nav ≥44px (DCISWEB-1 #10, #11) */
.header-area .main-nav .nav li a {
    min-height: 44px;
    line-height: 44px !important;
    height: 44px;
}
.header-area .main-nav .header-buttons li .btn-nav-line,
.header-area .main-nav .header-buttons li .btn-nav-primary {
    min-height: 44px;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* Botón nav diagnóstico: touch target (DCISWEB-1 #10) */
.header-area .main-nav .nav li a.btn-nav-diagnostic {
    min-height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
}

/* Submenu items: touch target ≥44px táctil (DCISWEB-2 #3) */
@media (max-width: 991px) {
    .header-area .main-nav .nav li.submenu ul li a {
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 20px 0 50px !important;
        min-height: 44px;
    }
}

/* Botón "Agendar diagnóstico" en mobile: visible con estilo CTA distinto */
@media (max-width: 991px) {
    .header-area .main-nav .nav li:has(a.btn-nav-diagnostic) {
        display: block !important;
        border-top: 2px solid rgba(168,126,216,.3) !important;
        background: #fff !important;
    }
    .header-area .main-nav .nav li a.btn-nav-diagnostic {
        color: #7E57C2 !important;
        font-weight: 800 !important;
        background: #fff !important;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    .header-area .main-nav .nav li a.btn-nav-diagnostic::before {
        content: "\f073";
        font-family: FontAwesome;
        font-size: .85em;
        color: #A87ED8;
        line-height: 50px;
    }
    .header-area .main-nav .nav li a.btn-nav-diagnostic:hover {
        background: #f5f0ff !important;
        color: #A87ED8 !important;
    }

    /* Submenu Soluciones: colorear el chevron existente en violeta */
    .header-area .main-nav .nav li.submenu:after {
        color: #A87ED8 !important;
    }
}

/* Footer: subir font-size en mobile (DCISWEB-3 #16, DCISWEB-1 #9) */
@media (max-width: 767px) {
    footer .text,
    footer a,
    footer .address p,
    footer p {
        font-size: 15px !important;
    }
}

/* Glow-sphere: limitar para evitar overflow (DCISWEB-3 #1) */
.glow-sphere {
    max-width: 100vw;
    overflow: hidden;
}

/* Section nav dots: ocultar en mobile y tablet (DCISWEB-2 #16, DCISWEB-3 #19) */
@media (max-width: 991px) {
    .section-nav-dots,
    .section-dots,
    nav.side-dots {
        display: none !important;
    }
}

nav li a, .color-white{
    color:white !important;
}
.welcome-area-one .content{
    margin-top: -38%;
}
h1,h2,h3{
    font-weight: 700!important;
}
.play-btn{
    background: #A87ED8 !important;
}
.center{
    text-align: center;
}
.justify{
    text-align: justify;
}
.welcome-area-two .content .text a:hover{
    color: #92BFF9;
    background-color: white;
}
.loader::before, .loader::after{
    background: #92BFF9 !important;

}
.background-purple{
    background-color: #A87ED8;
    color: white !important;
}
.background-blue{
    background-color: #92BFF9;
    color: white !important;
}
.color-purple{
    color: #A87ED8 !important;
}
.color-blue{
    color: #92BFF9 !important;
}
.bookcall-menu{
    background-color: white;
    color: #A87ED8;
}
.home-about-image p{
    text-align: center;
}
.line-btn:hover{
    color: #A97ED9 !important;
}
footer .text, footer a, footer .footer-nav li a span, footer .address p{
    color: white !important;
}
.copyright{
    color: white !important;
    border-top: 1px solid #92BFF9 !important;
}
.feature-item-one .title .icon {
    margin-right: 20px;
    margin-left: 30px;
}

.btn-linkedin {
    background: #0E76A8;
    border-color: #084461;
    border-radius: 0;
    color: #fff;
    border: 0px;
    padding: 10px 20px;
    font-size: 16px;
  }
  .btn-linkedin:link, .btn-linkedin:visited {
    color: #fff;
  }
  .btn-linkedin:active, .btn-linkedin:hover {
    background: #084461;
    color: #fff;
  }
  .comment{
    font-weight: 600;
  }


/* =============================================== */
/* Loader de entrada — critical CSS (anti-FOUC)    */
/* Compartido en todas las páginas                 */
/* =============================================== */
#loader{
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0f0f20 0%, #1d1f3a 45%, #2b2a5b 100%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), visibility .8s;
}
#loader::before{
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,126,216,.45), transparent 60%);
    filter: blur(90px);
    top: -120px; left: -160px;
    animation: dcg-loader-float 6s ease-in-out infinite;
    pointer-events: none;
}
#loader::after{
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(146,191,249,.4), transparent 60%);
    filter: blur(90px);
    bottom: -140px; right: -120px;
    animation: dcg-loader-float 7s -2s ease-in-out infinite reverse;
    pointer-events: none;
}
#loader.is-hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Rejilla de puntos de fondo */
#loader .dcg-loader-grid{
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 70%);
    opacity: .55;
    pointer-events: none;
}

/* Escenario central */
#loader .dcg-loader-stage{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

/* "DCisGlobal" — letra por letra, protagonista */
#loader .dcg-loader-brand{
    position: relative;
    display: flex;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 8px 30px rgba(168,126,216,.35);
}
#loader .dcg-loader-brand::before{
    content: "";
    position: absolute;
    inset: -50% -12%;
    background: radial-gradient(ellipse at center, rgba(168,126,216,.35), rgba(146,191,249,.18) 45%, transparent 75%);
    filter: blur(28px);
    z-index: -1;
    opacity: 0;
    animation: dcg-loader-fade .8s .1s ease-out forwards;
}
#loader .dcg-loader-brand span{
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    animation: dcg-loader-letter .6s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: calc(var(--i) * 55ms + 120ms);
}
/* Acentos de color de marca */
#loader .dcg-loader-brand span.dcg-accent-p{ color: #A87ED8; } /* D violeta */
#loader .dcg-loader-brand span.dcg-accent-b{ color: #92BFF9; } /* Cis azul  */

/* Tagline */
#loader .dcg-loader-tagline{
    font-family: 'Outfit', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0;
    animation: dcg-loader-fade .9s .75s ease-out forwards;
}

/* Barra de progreso abajo */
#loader .dcg-loader-progress{
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 2px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    overflow: hidden;
    z-index: 2;
}
#loader .dcg-loader-progress span{
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, #A87ED8 30%, #92BFF9 70%, transparent);
    border-radius: 2px;
    animation: dcg-loader-progress 1.6s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes dcg-loader-letter{
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dcg-loader-fade{
    to { opacity: 1; }
}
@keyframes dcg-loader-progress{
    0%   { left: -40%; width: 40%; }
    50%  { left: 30%;  width: 55%; }
    100% { left: 100%; width: 40%; }
}
@keyframes dcg-loader-float{
    0%,100% { transform: translate(0, 0); }
    50%     { transform: translate(40px, -30px); }
}


/* =============================================== */
/* Sistema reveal-on-scroll — compartido global    */
/* =============================================== */
:root{
    --dcg-ease-out: cubic-bezier(.16,1,.3,1);
}
/* #34 · Fallback sin-JS: si el motor de reveal (head.blade.php) no corrió,
   NADA queda invisible. La animación es una mejora opcional, no un requisito
   para ver el contenido. !important gana sobre los opacity:0 inline de cada página. */
html:not(.dcg-js) .dcg-reveal,
html:not(.dcg-js) .dcg-stagger > *,
html:not(.dcg-js) .sop-reveal,
html:not(.dcg-js) .reveal,
html:not(.dcg-js) .os-reveal,
html:not(.dcg-js) .dcore-reveal,
html:not(.dcg-js) .hs-cardgrid {
    opacity: 1 !important;
    transform: none !important;
}

.dcg-reveal{
    opacity: 0 !important;
    transform: translateY(40px);
    transition: opacity .7s var(--dcg-ease-out), transform .7s var(--dcg-ease-out);
    will-change: opacity, transform;
}
.dcg-reveal--left{  transform: translateX(-40px); }
.dcg-reveal--right{ transform: translateX(40px);  }
.dcg-reveal--scale{ transform: scale(.92); }
.dcg-reveal.is-visible{ opacity: 1 !important; transform: none !important; }
.dcg-reveal[data-delay="1"].is-visible{ transition-delay: .08s; }
.dcg-reveal[data-delay="2"].is-visible{ transition-delay: .16s; }
.dcg-reveal[data-delay="3"].is-visible{ transition-delay: .24s; }
.dcg-reveal[data-delay="4"].is-visible{ transition-delay: .32s; }
.dcg-reveal[data-delay="5"].is-visible{ transition-delay: .40s; }

.dcg-stagger > *{
    opacity: 0 !important;
    transform: translateY(32px);
    transition: opacity .7s var(--dcg-ease-out), transform .7s var(--dcg-ease-out);
}
.dcg-stagger.is-visible > *{ opacity: 1 !important; transform: none !important; }
.dcg-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; }
.dcg-stagger.is-visible > *:nth-child(2){ transition-delay: .12s; }
.dcg-stagger.is-visible > *:nth-child(3){ transition-delay: .19s; }
.dcg-stagger.is-visible > *:nth-child(4){ transition-delay: .26s; }
.dcg-stagger.is-visible > *:nth-child(5){ transition-delay: .33s; }
.dcg-stagger.is-visible > *:nth-child(6){ transition-delay: .40s; }

@media (prefers-reduced-motion: reduce){
    .dcg-reveal, .dcg-stagger > *{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =============================================== */
/* Chapter badges (01 · Problema, etc.)            */
/* =============================================== */
.dcg-chapter{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 5px 22px 5px 5px;
    border-radius: 999px;
    background: rgba(168,126,216,.08);
    border: 1px solid rgba(168,126,216,.20);
    font-family: 'Outfit', sans-serif;
    font-size: .8rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1;
}
.dcg-chapter-num{
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A87ED8 0%, #7E57C2 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 6px 18px -6px rgba(168,126,216,.55);
}
.dcg-chapter.dcg-chapter--dark{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
    color: rgba(255,255,255,.82);
}
.dcg-chapter.dcg-chapter--light{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.30);
    color: #fff;
}
.dcg-chapter.dcg-chapter--light .dcg-chapter-num{
    background: #fff;
    color: #7E57C2;
}


/* =============================================== */
/* Header sticky — compartido en todas las páginas */
/* =============================================== */
.header-area{
    transition: background .4s cubic-bezier(.22,.61,.36,1),
                backdrop-filter .4s cubic-bezier(.22,.61,.36,1),
                box-shadow .4s cubic-bezier(.22,.61,.36,1);
}
.header-area.header-sticky{
    background: rgba(29,31,58,.82) !important;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -16px rgba(0,0,0,.45);
}
.header-area.header-sticky::after{
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(168,126,216,.85) 25%,
        rgba(126,87,194,1) 50%,
        rgba(146,191,249,.85) 75%,
        transparent 100%);
    background-size: 200% 100%;
    animation: dcg-header-line 6s ease infinite;
    pointer-events: none;
}
@keyframes dcg-header-line{
    0%,100% { background-position:   0% 50%; }
    50%     { background-position: 200% 50%; }
}
/* Mobile header: transparent when at top, dark when sticky */
@media (max-width: 991px){
    .header-area:not(.header-sticky){
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
}
/* =============================================== */
/* SPRINT DCISWEB-3 — Animaciones mobile           */
/* =============================================== */

/* Animaciones más rápidas en mobile (DCISWEB-3 #14) */
@media (max-width: 767px) {
    .dcg-reveal {
        transition: opacity 0.45s var(--dcg-ease-out), transform 0.45s var(--dcg-ease-out) !important;
    }
    .dcg-stagger > * {
        transition: opacity 0.4s var(--dcg-ease-out), transform 0.4s var(--dcg-ease-out) !important;
    }
}

/* =============================================== */
/* SPRINT DCISWEB-1 — Mejoras desktop aprobadas   */
/* =============================================== */

/* Footer: font-size mínimo 16px en desktop (DCISWEB-1 #9) */
footer .text,
footer a,
footer .footer-nav li a span,
footer .address p,
footer p {
    font-size: 16px !important;
}

/* Texto cuerpo: slate-700 (#334155) reemplaza slate-500 (#64748b) (DCISWEB-1 #15) */
.section-subtitle-large,
.section-subtitle-medium,
.section p:not([style*="color"]),
.card-glass-premium p,
.card-symptom-new p,
.card-productivo-glass p {
    color: #334155 !important;
}

/* =============================================== */
/* SPRINT DCISWEB-3 — Mejoras mobile aprobadas    */
/* =============================================== */

/* Gap entre CTAs apilados en hero mobile (DCISWEB-3 #17) */
@media (max-width: 767px) {
    .hero-home-liquid .hero-ctas,
    .hero-home-liquid .d-flex.flex-wrap,
    .hero-home-liquid .btn-group-hero {
        gap: 16px !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* =============================================== */
/* SPRINT DCISWEB-43 — prefers-reduced-motion      */
/* Cero movimiento cuando el usuario lo solicita   */
/* =============================================== */
@media (prefers-reduced-motion: reduce) {

    /* Loader: desaparece instantáneamente sin animaciones de letras */
    #loader {
        transition: none !important;
    }
    #loader::before,
    #loader::after {
        animation: none !important;
    }
    #loader .dcg-loader-brand span {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    #loader .dcg-loader-brand::before {
        animation: none !important;
        opacity: 1 !important;
    }
    #loader .dcg-loader-tagline {
        animation: none !important;
        opacity: 1 !important;
    }
    #loader .dcg-loader-progress span {
        animation: none !important;
        width: 100% !important;
        left: 0 !important;
    }

    /* Header sticky: sin animación de borde gradiente */
    .header-area.header-sticky::after {
        animation: none !important;
        background-position: 0% 50% !important;
    }
    .header-area {
        transition: none !important;
    }

    /* Imagen floating (Excel Chaos, hero, etc.) */
    [style*="floating-anim"],
    .floating-anim,
    .hero-svg-float {
        animation: none !important;
        transform: none !important;
    }

    /* fadeInUpCustom — secciones de contenido */
    [class*="fadeInUp"],
    .fadeInUpCustom {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Hero: animaciones de entrada de líneas */
    .hero-title-main .hero-line > span {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-title-main .hero-accent,
    .hero-title-main .hero-broken {
        animation: none !important;
    }

    /* Blobs decorativos */
    .blob--purple,
    .blob--blue,
    .blob-hero,
    [class*="blob"] {
        animation: none !important;
    }

    /* bridge-nexus: ícono pulsante */
    .bridge-nexus,
    .bridge-nexus i {
        animation: none !important;
    }

    /* Hover effects: sin transform en tarjetas */
    .card-symptom-new:hover,
    .method-card-solid:hover,
    .card-glass-premium:hover,
    .card-transformation-pillar:hover,
    .card-productivo-glass:hover,
    .card-breaking-glass:hover {
        transform: none !important;
    }
    .method-card-solid:hover .step-num {
        transform: none !important;
    }

    /* Glow-sphere */
    .glow-sphere {
        animation: none !important;
    }

    /* Todas las transiciones y animaciones residuales */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================== */
/* SPRINT DCISWEB-46 — Swipe carousel síntomas     */
/* scroll-snap horizontal en mobile (<768px)       */
/* =============================================== */
@media (max-width: 767px) {
    .section-symptoms .row.g-4.dcg-stagger {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 20px !important;
        gap: 16px !important;
        /* Compensar padding lateral del container */
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .section-symptoms .row.g-4.dcg-stagger::-webkit-scrollbar {
        display: none !important;
    }
    .section-symptoms .row.g-4.dcg-stagger > [class*="col-"] {
        flex: 0 0 82vw !important;
        max-width: 82vw !important;
        scroll-snap-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Dots indicadores debajo del carousel */
    .section-symptoms .symptoms-carousel-hint {
        text-align: center;
        font-size: 0.75rem;
        color: #6b7280;
        margin-top: 8px;
        letter-spacing: 1px;
    }
}

/* =============================================== */
/* #76 · Links: nunca el azul de Bootstrap (#007bff) */
/* - tap-highlight transparente: sin flash azul al    */
/*   tocar en mobile (cualquier link).                */
/* - links SIN clase toman color de marca en todos    */
/*   los estados (los botones/nav/footer tienen clase  */
/*   y conservan su color). El foco accesible (#60)    */
/*   sigue por outline, no por color.                  */
/* =============================================== */
a { -webkit-tap-highlight-color: transparent; }
a:not([class]) { color: #A87ED8; }
a:not([class]):hover,
a:not([class]):focus,
a:not([class]):active { color: #92BFF9; }

/* =============================================== */
/* #60 · Foco de teclado visible (WCAG 2.4.7)      */
/* style.css resetea outline:0 globalmente y nunca  */
/* lo repone. Reponemos un foco visible SOLO para   */
/* navegación por teclado (:focus-visible), sin      */
/* afectar el estado normal ni el click de mouse.    */
/* =============================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible {
    outline: 3px solid #A87ED8 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
    /* halo blanco extra: garantiza contraste también sobre fondos violeta/azul */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85) !important;
}

/* Inputs/areas de texto: el offset negativo evita que el halo tape el campo */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0 !important;
}