/* Home Page Styles */

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

html {
    scroll-behavior: smooth;
}

/* Initial page loader - shown for ~2.4s on every load/reload of the home
   page while assets (images, fonts) finish settling in. The logo flies in
   as two halves from the screen edges and "assembles" in the middle, then
   a camera-style focus frame locks on with a scan-beam accent to read as
   a security/tech check. */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, var(--brand-white), var(--brand-silver-100));
    transition: opacity 0.7s var(--easing-standard), visibility 0.7s var(--easing-standard);
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-logo-wrap {
    position: relative;
    z-index: 1;
    width: min(720px, 92vw);
    aspect-ratio: 570 / 438;
    animation: pageLoaderPulse 1.3s ease-in-out infinite;
    animation-delay: 1.9s;
}

.page-loader-logo-half {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(10, 35, 66, 0.3));
    opacity: 0;
}

.page-loader-logo-half-left {
    clip-path: inset(0 50% 0 0);
    animation: pageLoaderSlideLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-loader-logo-half-right {
    clip-path: inset(0 0 0 50%);
    animation: pageLoaderSlideRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Impact flash where the two halves meet, like a "verified" pulse */
.page-loader-impact {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    animation: pageLoaderImpact 0.9s ease-out 0.75s 1 both;
}

/* Scan beam sweeping across the assembled logo silhouette */
.page-loader-scan {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    -webkit-mask-image: url("../img/logo_clinisoft.6f40cf5a478d.png");
    mask-image: url("../img/logo_clinisoft.6f40cf5a478d.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.85) 48%, rgba(120, 190, 255, 0.9) 52%, transparent 68%);
    background-size: 240% 240%;
    background-position: -70% -70%;
    opacity: 0;
    animation: pageLoaderScan 1s ease-out 0.9s 1 both;
}

@keyframes pageLoaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.8; }
}

@keyframes pageLoaderSlideLeft {
    0% { transform: translateX(-120vw); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes pageLoaderSlideRight {
    0% { transform: translateX(120vw); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes pageLoaderImpact {
    0% { box-shadow: 0 0 0 0 rgba(10, 35, 66, 0.55), 0 0 0 0 rgba(193, 18, 31, 0.4); opacity: 1; }
    60% { opacity: 0.55; }
    100% { box-shadow: 0 0 0 240px rgba(10, 35, 66, 0), 0 0 0 200px rgba(193, 18, 31, 0); opacity: 0; }
}

@keyframes pageLoaderScan {
    0% { opacity: 0; background-position: -70% -70%; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; background-position: 170% 170%; }
}

/* Camera-style focus frame that "locks on" to the shield once it's
   assembled, like a modern CCTV/surveillance viewfinder acquiring its
   target: slim glowing corner marks with a precise lock-point tip. */
.page-loader-bracket {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--brand-blue);
    filter: drop-shadow(0 0 5px rgba(10, 35, 66, 0.5));
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    animation: pageLoaderBracketIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-loader-bracket::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--brand-red);
    box-shadow: 0 0 4px rgba(193, 18, 31, 0.7);
}

.page-loader-bracket-tl {
    top: -9px;
    left: -9px;
    border-right: 0;
    border-bottom: 0;
    --bx: -16px;
    --by: -16px;
    animation-delay: 0.95s;
}

.page-loader-bracket-tl::after {
    top: -2px;
    left: -2px;
}

.page-loader-bracket-tr {
    top: -9px;
    right: -9px;
    border-left: 0;
    border-bottom: 0;
    --bx: 16px;
    --by: -16px;
    animation-delay: 1.02s;
}

.page-loader-bracket-tr::after {
    top: -2px;
    right: -2px;
}

.page-loader-bracket-bl {
    bottom: -9px;
    left: -9px;
    border-right: 0;
    border-top: 0;
    --bx: -16px;
    --by: 16px;
    animation-delay: 1.02s;
}

.page-loader-bracket-bl::after {
    bottom: -2px;
    left: -2px;
}

.page-loader-bracket-br {
    bottom: -9px;
    right: -9px;
    border-left: 0;
    border-top: 0;
    --bx: 16px;
    --by: 16px;
    animation-delay: 1.09s;
}

.page-loader-bracket-br::after {
    bottom: -2px;
    right: -2px;
}

@keyframes pageLoaderBracketIn {
    0% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.85); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* "REC" badge in the corner of the loader, like a security camera's
   on-screen recording indicator - reinforces the surveillance motif. */
.page-loader-rec {
    position: absolute;
    top: max(28px, 4vh);
    left: max(28px, 4vw);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    font-family: 'Courier New', ui-monospace, monospace;
    letter-spacing: 0.12em;
    animation: pageLoaderRecIn 0.4s ease-out 1.1s both;
}

.page-loader-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-red);
    box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.55);
    animation: pageLoaderRecPulse 1.4s ease-in-out 1.5s infinite;
}

.page-loader-rec-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-blue);
}

@keyframes pageLoaderRecIn {
    to { opacity: 1; }
}

@keyframes pageLoaderRecPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.55); }
    50% { box-shadow: 0 0 0 7px rgba(193, 18, 31, 0); }
}

/* Hero logo hover - the same "camera lock-on" surveillance language as the
   page loader (corner brackets + scan beam), replayed as a hover moment on
   the hero logo instead of a one-time load-in sequence. */
.hero-logo-surveil {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.hero-logo-bracket {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid var(--brand-blue);
    filter: drop-shadow(0 0 5px rgba(10, 35, 66, 0.5));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--easing-standard), transform 0.3s var(--easing-standard);
}

.hero-logo-bracket::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--brand-red);
    box-shadow: 0 0 4px rgba(193, 18, 31, 0.7);
}

.hero-logo-bracket-tl { top: 4%; left: 8%; border-right: 0; border-bottom: 0; transform: translate(-14px, -14px); }
.hero-logo-bracket-tl::after { top: -2px; left: -2px; }

.hero-logo-bracket-tr { top: 4%; right: 8%; border-left: 0; border-bottom: 0; transform: translate(14px, -14px); }
.hero-logo-bracket-tr::after { top: -2px; right: -2px; }

.hero-logo-bracket-bl { bottom: 4%; left: 8%; border-right: 0; border-top: 0; transform: translate(-14px, 14px); }
.hero-logo-bracket-bl::after { bottom: -2px; left: -2px; }

.hero-logo-bracket-br { bottom: 4%; right: 8%; border-left: 0; border-top: 0; transform: translate(14px, 14px); }
.hero-logo-bracket-br::after { bottom: -2px; right: -2px; }

.hero-logo-surveil:hover .hero-logo-bracket {
    opacity: 1;
    transform: translate(0, 0);
}

.hero-logo-surveil:hover .hero-logo-bracket-tr,
.hero-logo-surveil:hover .hero-logo-bracket-bl {
    transition-delay: 0.05s;
}

.hero-logo-surveil:hover .hero-logo-bracket-br {
    transition-delay: 0.1s;
}

/* Scan beam masked to the logo's own silhouette, same technique as the
   loader's .page-loader-scan, so only the logo shape lights up. */
.hero-logo-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: url("../img/logo_clinisoft.6f40cf5a478d.png");
    mask-image: url("../img/logo_clinisoft.6f40cf5a478d.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.85) 48%, rgba(120, 190, 255, 0.9) 52%, transparent 68%);
    background-size: 240% 240%;
    background-position: -70% -70%;
    opacity: 0;
}

.hero-logo-surveil:hover .hero-logo-scan {
    animation: heroLogoScan 1.1s ease-out;
}

@keyframes heroLogoScan {
    0% { opacity: 0; background-position: -70% -70%; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; background-position: 170% 170%; }
}

/* Infinite Scroll Styles - only the outer container clips (and with
   generous vertical padding); the inner wrapper used to also clip with
   zero padding, cutting off the cards' red glow and hover-lift at the
   top/bottom edges of the rail. */
.infinite-scroll-container {
    overflow: hidden;
    width: 100%;
    padding: 40px 0;
}

.infinite-scroll-wrapper {
    width: 100%;
}

.infinite-scroll-track {
    display: flex;
    gap: 20px;
    animation: scroll 30s linear infinite;
    width: max-content;
}

.infinite-scroll-track:hover {
    animation-play-state: paused;
}

.infinite-scroll-item {
    flex: 0 0 auto;
    width: 280px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Product Card sizing for the home page's horizontal rail - the image/info
   layout rules for .product-card live in style.css (shared with product
   list), this file only carries this page's own dimension. */
.product-card {
    min-height: 380px;
}

/* About Us Card's .about-carousel-frame / .carousel-img / .feature-item
   now live in style.css - about_us_card.html is shared between the home
   page and the dedicated /nosotros/ page, and the latter doesn't load
   this stylesheet, so anything scoped to that component has to live
   somewhere both pages load or it silently renders unstyled there. */

/* Reviews carousel - a rotating window over the review pool. Each tick
   swaps the slots' content and the fresh cards animate in from above
   (reviewDropIn), so it reads as new testimonials settling into place
   rather than a generic slide. No manual controls - it just runs. */
.review-slot {
    min-height: 1px;
}

.review-slot:empty {
    display: none;
}

@keyframes reviewDropIn {
    0% { opacity: 0; transform: translateY(-28px); }
    100% { opacity: 1; transform: translateY(0); }
}

.review-slot .review-card {
    animation: reviewDropIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}