/* MiConsulta - se apoya en style.css y solo cambia la identidad.
   Colores tomados del logo (img/brand/miconsulta.png). */

:root {
    --verde: #0B7F78;          /* turquesa del logo, oscurecido para que el texto blanco se lea */
    --verde-hover: #096B65;
    --verde-oscuro: #002B53;   /* azul marino del logo */
    --fondo-claro: #F2F7F9;
    --verde-suave: #D5EFEC;
    --texto-suave: #4A5F70;
    --borde: #DCE6EC;
    --acento-claro: #5FD6C8;
}

.logo img {
    width: 170px;
    height: auto;
}

.footer-logo {
    background: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 6px;
}

.footer-inner .footer-logo img {
    width: 180px;
    margin: 0;
}

.footer-copy a {
    color: inherit;
}

.feature-num,
.product .kicker {
    color: var(--acento-claro);
}

.phone {
    box-shadow: 0 30px 60px -20px rgba(15, 47, 58, 0.45);
}

/* Capturas del sistema */

.shot {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px -26px rgba(0, 43, 83, 0.45);
}

.shot img {
    width: 100%;
    height: auto;
}

a.shot {
    display: block;
}

.shot--hero {
    width: 100%;
}

.shots-grid {
    display: grid;
    gap: 28px;
}

.shot-card {
    margin: 0;
}

.shot-card figcaption {
    margin-top: 14px;
    color: var(--texto-suave);
    font-size: 0.95rem;
}

.shot-card figcaption strong {
    display: block;
    color: var(--verde-oscuro);
    font-size: 1.05rem;
}

.hero-actions .btn-ghost small {
    font-weight: 400;
}

@media (min-width: 640px) {
    .features-grid--six {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid--two {
        grid-template-columns: repeat(2, 1fr);
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (min-width: 960px) {
    .features-grid--six {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-inner {
        grid-template-columns: 1fr 1.15fr;
    }

    .hero h1 {
        font-size: 2.7rem;
    }

    .shots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 32px;
    }

    .shot-card--wide {
        grid-column: 1 / -1;
    }

    .logo img {
        width: 210px;
    }

    .portfolio-grid--two {
        grid-template-columns: repeat(2, 1fr);
    }
}