/* ==========================================================================
   STARSOFT — Página Inicio
   ========================================================================== */

/* ---- 1. Hero (slider) ---- */
.hero {
    background: var(--starsoft-white);
}
.hero-slider {
    position: relative;
    width: 100%;
    background: var(--starsoft-white);
}
.hero-slider__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 2001 / 786;
    overflow: hidden;
    border-bottom: 3px solid transparent;
    border-image: var(--starsoft-gold-gradient) 1;
}
.hero-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}
.hero-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
}
.hero-slider__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slider__video-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--starsoft-dark-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    transition: background var(--transition-fast), transform var(--transition-fast);
    z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
    .hero-slider__arrow:hover {
        background: var(--starsoft-gold);
        color: var(--starsoft-white);
        transform: translateY(-50%) scale(1.06);
    }
}
.hero-slider__arrow--prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.hero-slider__arrow--next { right: clamp(0.6rem, 2vw, 1.6rem); }

.hero-slider__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(0.7rem, 2vw, 1.4rem);
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}
@media (max-width: 767px) {
    .hero-slider__dots {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        justify-content: center;
        padding: 0.7rem 0;
    }
}
.hero-slider__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(8, 8, 46, 0.25);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.hero-slider__dot.is-active {
    background: var(--starsoft-gold);
    border-color: var(--starsoft-gold-dark);
    transform: scale(1.15);
}

/* ---- 2. Más que un software ---- */
.socio-negocios {
    padding: var(--section-padding-y) 0;
    background: var(--starsoft-light-gray);
}
#socio-heading {
    color: var(--starsoft-gold-dark);
}
#socio-heading .heading-ink {
    color: var(--starsoft-text);
}
.socio-card {
    height: 100%;
    padding: 1.4rem 1.6rem 1.8rem;
    text-align: center;
    background: var(--starsoft-white);
}
.socio-card__img {
    width: 100%;
    max-width: 110px;
    height: auto;
    margin: 0 auto 1rem;
    transition: transform 0.4s ease;
}
.socio-card:hover .socio-card__img {
    transform: scale(1.12) rotate(-6deg);
}
.socio-card__title {
    color: var(--starsoft-gold-dark);
    font-size: 1.02rem;
    margin-bottom: 0.5rem;
}
.socio-card p {
    font-size: 0.9rem;
}

/* ---- 3. Productividad ---- */
.productividad {
    padding: var(--section-padding-y) 0;
}
.productividad__intro h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin-bottom: 1rem;
    color: var(--starsoft-gold-dark);
}
#productividad-heading .heading-ink {
    color: var(--starsoft-text);
}
.productividad__intro p {
    margin-bottom: 1rem;
}
.productividad__highlight {
    display: inline-block;
    font-weight: 800;
    color: var(--starsoft-gold-dark);
    border-left: 3px solid var(--starsoft-gold);
    padding-left: 0.8rem;
    padding-right: 1.6rem;
    font-size: 0.95rem;
    position: relative;
}
.productividad__highlight::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.5rem;
    animation: productividadArrow 1.2s ease-in-out infinite;
}
@keyframes productividadArrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(6px);
        opacity: 0.6;
    }
}

.producto-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    text-align: center;
}
.producto-card__media {
    position: relative;
    margin: 0 0 1.1rem;
    aspect-ratio: 380 / 250;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.producto-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.producto-card:hover .producto-card__media img {
    transform: scale(1.08);
}
/* Destello diagonal que cruza la captura al pasar el cursor */
.producto-card__media::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 35%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.75s ease;
    pointer-events: none;
}
.producto-card:hover .producto-card__media::after {
    left: 130%;
}
.producto-card p {
    font-size: 0.88rem;
    margin-bottom: 1.2rem;
}
.producto-card .btn {
    align-self: center;
    margin-top: auto;
}

/* ---- 4. Módulos especializados ---- */
.modulos {
    padding: var(--section-padding-y) 0;
    background: var(--starsoft-light-gray);
}
#modulos-heading {
    color: var(--starsoft-text);
}
.modulos .section-head .section-subtitle + .section-subtitle {
    margin-top: 0.3rem;
}
.modulo-card {
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modulo-card__img {
    width: 100%;
    max-width: 130px;
    height: auto;
    margin-bottom: 1rem;
}
.modulo-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}
.modulo-card--factron h3 { color: var(--starsoft-red); }
.modulo-card--contabilidad h3 { color: var(--starsoft-blue); }
.modulo-card--planillas h3 { color: #1f9d6f; }
.modulo-card--costos h3 { color: var(--starsoft-orange); }
.modulo-card p {
    font-size: 0.87rem;
    margin-bottom: 1.3rem;
}
.modulo-card .btn-outline {
    margin-top: auto;
    padding: 0.6rem 1.4rem;
    font-size: 0.85rem;
}

/* ---- 5. Portales STARSOFT ---- */
.portales {
    padding: var(--section-padding-y) 0;
    background: var(--starsoft-white);
    overflow: hidden;
    position: relative;
}
.portales__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity var(--transition-medium);
    background: radial-gradient(circle 320px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(217, 149, 40, 0.32), transparent 70%);
}
.portales:hover .portales__glow {
    opacity: 1;
}
.portales .container {
    position: relative;
    z-index: 1;
}
.portales__text h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 1rem;
}
.portales__text h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--starsoft-gold-gradient);
}
.portales__text p {
    margin-bottom: 1.6rem;
    max-width: 46ch;
}

.cloud-graphic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1237 / 753;
    margin-inline: auto;
}
.cloud-graphic img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: 50% 50%;
}

/* ---- Reveal delays ---- */
.socio-card:nth-child(2), .modulo-card:nth-child(2) { transition-delay: 0.08s; }
.socio-card:nth-child(3), .modulo-card:nth-child(3) { transition-delay: 0.16s; }
.socio-card:nth-child(4), .modulo-card:nth-child(4) { transition-delay: 0.24s; }