/* ==========================================
   PROFESIONALES PAGE CSS
   Page-unique styles only
   ========================================== */

/* Typing dots variant (shared uses .typing-dot, page uses .dot) */
.dot {
    width: 6px;
    height: 6px;
    background-color: #9ca3af;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1.4s infinite ease-in-out both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

/* ==========================================
   TYPEWRITER EFFECT - PREVENT LAYOUT SHIFT
   Keep height fixed while text changes length
   ========================================== */

/* Desktop: normal behavior */
#typewriter-section > p {
    line-height: inherit;
}

/* Mobile: prevent layout shift */
@media (max-width: 768px) {
    #typewriter-section {
        /* Prevent section from shrinking/expanding on mobile */
        min-height: 200px;
    }

    #typewriter-section > p {
        /* Fixed line-height to prevent vertical shift when word wraps */
        line-height: 1.3;
        /* Minimum height to accommodate all possible text configurations */
        min-height: 7em;
        /* Prevent vertical centering shift */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

#typewriter-word {
    display: inline-block;
    /* min-width prevents collapse when empty */
    min-width: 0.5em;
    /* Prevent word wrapping within the animated text */
    white-space: nowrap;
    /* Prevent visual glitches from text reflow */
    vertical-align: baseline;
}

/* ==========================================
   MOBILE ANIMATION CONTAINERS
   Show animations on mobile below text
   ========================================== */
@media (max-width: 1023px) {
    /* Animation containers - show on mobile (only .anim-col, not header) */
    .anim-col.hidden.lg\:flex {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        padding: 0 !important;
        margin-top: 1.5rem !important;
        transform: scale(0.55) !important;
        transform-origin: top center !important;
        overflow: visible !important;
    }
    
    /* Remove sticky on mobile */
    .anim-col.sticky {
        position: relative !important;
    }
    
    /* Allow animation containers to overflow */
    .embedded-anim-container {
        overflow: visible !important;
    }
    
    .stage-scaler {
        overflow: visible !important;
    }
}