/* =========================================================
   LABORATORIO DML
   PORTADA PUBLICA
   COMMIT 3
   ========================================================= */

:root {

    --verde: #14843d;
    --verde-claro: #2aaa62;
    --verde-suave: #eaf7f0;

    --azul: #28455e;
    --azul-claro: #526a7e;

    --morado: #7b278e;
    --naranja: #f18a18;
    --amarillo: #e1bd19;
    --cyan: #45b9d0;
    --azul-logo: #377fbd;

    --blanco: #ffffff;
    --fondo: #f8fbfa;

    --borde: #dfe9e5;

}


/* =========================================================
   GENERAL
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--azul);

    background: var(--blanco);

}


a {
    text-decoration: none;

    color: inherit;
}


button {
    font-family: inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.header-dml {

    height: 102px;

    width: 100%;

    padding:
        10px
        28px;

    display: flex;

    align-items: center;

    gap: 30px;

    background: rgba(255,255,255,.97);

    border-bottom:
        1px solid
        rgba(40,69,94,.10);

    position: relative;

    z-index: 100;

}


.marca-dml {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 285px;

}


.logo-header {

    width: 72px;
    height: 72px;

    object-fit: contain;

    transform: scale(1.15);

    transform-origin: center;
}


.marca-texto {

    display: flex;

    flex-direction: column;

    line-height: 1.03;

}


.marca-texto strong,
.marca-texto span {

    font-family: Georgia, serif;

    color: var(--verde);

}


.marca-texto strong {

    font-size: 15px;

}


.marca-texto span {

    font-size: 14px;

}


/* =========================================================
   NAVEGACION
   ========================================================= */

.navegacion {

    display: flex;

    align-items: center;

    gap: 34px;

    flex: 1;

}


.navegacion a {

    height: 102px;

    display: flex;

    align-items: center;

    position: relative;

    font-size: 14px;

    color: #40576b;

    transition:
        color .25s ease;

}


.navegacion a:hover {

    color: var(--verde);

}


.navegacion a.activo {

    color: var(--verde);

    font-weight: 600;

}


.navegacion a.activo::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: var(--verde);

}


/* =========================================================
   ACCESOS
   ========================================================= */

.accesos {

    display: flex;

    gap: 10px;

}


.acceso {

    min-width: 158px;

    min-height: 72px;

    padding: 9px 13px;

    border:
        1px solid
        var(--borde);

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9f7
        );

    display: flex;

    align-items: center;

    gap: 11px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.acceso:hover {

    transform: translateY(-2px);

    border-color:
        rgba(20,132,61,.35);

    box-shadow:
        0 8px 20px
        rgba(20,80,50,.08);

}


.acceso-icono {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: var(--azul);

}


.acceso-texto {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}


.acceso strong {

    font-size: 12px;

    color: #233c55;

}


.acceso small {

    margin-top: 6px;

    font-size: 8px;

    letter-spacing: 1px;

    color: #718294;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    min-height:
        calc(100vh - 102px);

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #ffffff 45%,
            #f1faf7 100%
        );

}


.hero-imagen {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

}


.hero-imagen img {

    position: absolute;

    right: 0;

    top: 0;

    width: 72%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: .92;

}


.hero-luz {

    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.98) 28%,
            rgba(255,255,255,.72) 45%,
            rgba(255,255,255,0) 67%
        );

}


/* =========================================================
   HERO CONTENIDO
   ========================================================= */

.hero-contenido {

    position: relative;

    z-index: 10;

    width: 51%;

    max-width: 720px;

    margin-left: 9vw;

    padding:
        45px 0
        60px;

}


.hero-logo {

    margin-bottom: 14px;

}


.hero-logo img {

    width: 280px;

    height: 280px;

    object-fit: contain;

    transform: scale(1.25);

    transform-origin: center;

    filter:
        drop-shadow(
            0 14px 22px
            rgba(0,0,0,.10)
        );

    animation:
        logo-respiro
        6s
        ease-in-out
        infinite;
}

    filter:
        drop-shadow(
            0 12px 18px
            rgba(0,0,0,.10)
        );

    animation:
        logo-respiro
        6s
        ease-in-out
        infinite;

}


.hero-etiqueta {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

    color: var(--verde);

    margin-bottom: 10px;

}


.hero h1 {

    margin:
        0 0
        20px;

    max-width: 650px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            4.1vw,
            65px
        );

    line-height: 1.03;

    letter-spacing: -1.5px;

    font-weight: 700;

    color: var(--verde);

}


.hero-separador {

    display: flex;

    align-items: center;

    gap: 11px;

    width: 240px;

    margin-bottom: 17px;

}


.hero-separador span {

    height: 2px;

    flex: 1;

    background: var(--verde);

}


.hero-separador b {

    color: var(--verde);

    font-size: 19px;

}


.hero-descripcion {

    margin:
        0 0
        25px;

    font-size: 18px;

    line-height: 1.45;

    color: #405b70;

}


/* =========================================================
   BOTONES
   ========================================================= */

.hero-botones {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}


.boton {

    min-height: 43px;

    padding:
        0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border-radius: 24px;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.boton:hover {

    transform: translateY(-2px);

}


.boton-verde {

    color: white;

    background: var(--verde);

    box-shadow:
        0 8px 18px
        rgba(20,132,61,.20);

}


.boton-verde:hover {

    background: #107136;

    box-shadow:
        0 11px 24px
        rgba(20,132,61,.27);

}


.boton-blanco {

    color: var(--verde);

    background: rgba(255,255,255,.88);

    border:
        1.5px solid
        var(--verde);

}


.boton-blanco:hover {

    background: white;

}


/* =========================================================
   FRASE HERO
   ========================================================= */

.frase-hero {

    position: absolute;

    z-index: 12;

    right: 5.5%;

    top: 25%;

    display: flex;

    flex-direction: column;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    color: #34566f;

    transform: rotate(-8deg);

    text-align: center;

    animation:
        frase-flotante
        7s
        ease-in-out
        infinite;

}


.frase-hero span {

    font-size: 30px;

}


.frase-hero strong {

    font-size: 27px;

    font-weight: normal;

}


/* =========================================================
   PARTICULAS
   ========================================================= */

.particula {

    position: absolute;

    z-index: 8;

    width: 11px;

    height: 11px;

    border-radius: 50%;

    opacity: .75;

    animation:
        particula-flotar
        5s
        ease-in-out
        infinite;

}


.p1 {

    left: 4%;

    top: 27%;

    background: #57bd91;

}


.p2 {

    left: 18%;

    top: 69%;

    background: var(--morado);

    animation-delay: 1s;

}


.p3 {

    left: 42%;

    top: 22%;

    background: var(--naranja);

    animation-delay: 2s;

}


.p4 {

    right: 20%;

    top: 35%;

    background: var(--amarillo);

    animation-delay: 3s;

}


.p5 {

    right: 8%;

    bottom: 16%;

    background: var(--cyan);

    animation-delay: 4s;

}


/* =========================================================
   PROMOCIONES
   ========================================================= */

.promociones {

    padding:
        18px
        2.5vw
        10px;

    background: #ffffff;

}


.promociones-encabezado {

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        0 12px
        10px;

}


.promociones-encabezado h2 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: 26px;

    color: var(--azul);

}


.promociones-encabezado p {

    margin: 0;

    color: #6b7c8c;

    font-size: 13px;

}


.mini-etiqueta {

    font-size: 9px;

    letter-spacing: 3px;

    font-weight: 700;

    color: var(--verde);

}


.banner-promocion {

    width: 100%;

    min-height: 105px;

    border:
        1px solid
        var(--borde);

    border-radius: 12px;

    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            #f3faf7,
            #ffffff
        );

}


.banner-placeholder {

    min-height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    color: var(--azul);

}


.banner-icono {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--verde-suave);

    color: var(--verde);

    font-size: 22px;

}


.banner-placeholder strong {

    font-family: Georgia, serif;

    font-size: 21px;

}


.banner-placeholder p {

    margin: 4px 0 0;

    font-size: 13px;

    color: #6c7e8e;

}


/* =========================================================
   SECCIONES
   ========================================================= */

.seccion {

    padding:
        45px
        2.7vw;

}


.titulo-seccion {

    display: flex;

    align-items: end;

    justify-content: space-between;

    margin-bottom: 20px;

}


.titulo-seccion span {

    font-size: 9px;

    letter-spacing: 3px;

    font-weight: 700;

    color: var(--verde);

}


.titulo-seccion h2 {

    margin:
        4px 0
        0;

    font-family: Georgia, serif;

    font-size: 34px;

    color: var(--azul);

}


.titulo-seccion p {

    margin: 0 10px 4px;

    font-size: 13px;

    color: #687c8c;

}


/* =========================================================
   SERVICIOS
   ========================================================= */

.servicios-grid {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 12px;

}


.servicio {

    min-height: 135px;

    padding: 20px 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: white;

    border:
        1px solid
        #e1e9e6;

    border-radius: 11px;

    box-shadow:
        0 4px 12px
        rgba(20,70,50,.035);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.servicio:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 25px
        rgba(20,70,50,.09);

}


.servicio-icono {

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 38px;

    font-weight: 700;

}


.sangre {
    color: #df4565;
}

.quimica {
    color: #3b82c5;
}

.bacterio {
    color: var(--morado);
}

.uro {
    color: #d7a900;
}

.para {
    color: var(--verde);
}

.inmuno {
    color: #24aebe;
}

.especial {
    color: #ef8152;
}


.servicio h3 {

    margin:
        8px 0
        3px;

    font-size: 15px;

    color: #173c66;

}


.servicio p {

    margin: 0;

    font-size: 11px;

    color: #68788a;

}


/* =========================================================
   NOSOTROS
   ========================================================= */

.nosotros {

    min-height: 260px;

    padding:
        50px
        9vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        linear-gradient(
            100deg,
            #f0faf5,
            #ffffff
        );

}


.nosotros-contenido {

    max-width: 650px;

}


.nosotros h2 {

    margin:
        8px 0
        15px;

    font-family: Georgia, serif;

    font-size: 40px;

    color: var(--verde);

}


.nosotros p {

    max-width: 500px;

    font-size: 16px;

    line-height: 1.6;

    color: #506678;

}


.nosotros-frase {

    margin-right: 7vw;

    display: flex;

    flex-direction: column;

    font-family:
        "Brush Script MT",
        cursive;

    font-size: 38px;

    color: #45647b;

    transform: rotate(-7deg);

}


/* =========================================================
   MATRIZ
   ========================================================= */

.sucursales {

    background: white;

}


.matriz-card {

    min-height: 180px;

    padding:
        28px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border:
        1px solid
        var(--borde);

    border-radius: 14px;

    background:
        linear-gradient(
            110deg,
            #f8fcfa,
            #ffffff
        );

}


.matriz-info {

    display: flex;

    align-items: center;

    gap: 22px;

}


.pin {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--verde-suave);

    color: var(--verde);

    font-size: 25px;

}


.matriz-info h3 {

    margin: 0 0 7px;

    font-family: Georgia, serif;

    font-size: 23px;

    color: var(--azul);

}


.matriz-info p {

    margin: 0;

    line-height: 1.5;

    font-size: 14px;

    color: #617386;

}


/* =========================================================
   VALORES
   ========================================================= */

.valores {

    min-height: 125px;

    padding:
        25px
        5vw;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    background: #eefaf5;

}


.valor {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border-right:
        1px solid
        rgba(20,132,61,.20);

}


.valor:last-child {

    border-right: 0;

}


.valor > span {

    font-size: 38px;

    color: #086b53;

}


.valor div {

    display: flex;

    flex-direction: column;

}


.valor strong {

    font-size: 12px;

    color: #1c5365;

}


.valor small {

    margin-top: 5px;

    font-size: 11px;

    color: #637b89;

}


/* =========================================================
   CONTACTO
   ========================================================= */

.contacto {

    min-height: 170px;

    padding:
        35px
        9vw;

    display: flex;

    align-items: center;

    gap: 25px;

    background: white;

}


.contacto img {

    width: 90px;

    height: 90px;

    object-fit: contain;

}


.contacto h2 {

    margin: 0 0 7px;

    font-family: Georgia, serif;

    color: var(--verde);

}


.contacto p {

    margin: 0;

    color: #657687;

}


/* =========================================================
   MENU MOVIL
   ========================================================= */

.boton-menu {

    display: none;

    border: 0;

    background: none;

    font-size: 25px;

    color: var(--verde);

}


.menu-movil {

    display: none;

}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes logo-respiro {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}


@keyframes frase-flotante {

    0%,
    100% {
        transform:
            rotate(-8deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-5deg)
            translateY(-8px);
    }

}


@keyframes particula-flotar {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-13px)
            scale(1.12);
    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

    .header-dml {
        padding-left: 18px;
        padding-right: 18px;
        gap: 15px;
    }

    .marca-dml {
        min-width: 235px;
    }

    .logo-header {
        width: 65px;
        height: 65px;
    }

    .navegacion {
        gap: 18px;
    }

    .acceso {
        min-width: 125px;
    }

}


@media (max-width: 1000px) {

    .navegacion {
        display: none;
    }

    .accesos {
        margin-left: auto;
    }

    .acceso {
        min-width: 115px;
    }

    .hero-contenido {
        margin-left: 6vw;
        width: 60%;
    }

    .hero-logo img {
        width: 150px;
        height: 150px;
    }

    .hero h1 {
        font-size: 45px;
    }

    .servicios-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

}


@media (max-width: 760px) {

    .header-dml {
        height: 78px;
    }

    .marca-dml {
        min-width: 0;
    }

    .logo-header {
        width: 55px;
        height: 55px;
    }

    .marca-texto strong,
    .marca-texto span {
        font-size: 11px;
    }

    .accesos {
    display: flex;
    margin-left: auto;
    gap: 6px;
}

.acceso {
    display: none;
}

.acceso:last-child {
    display: flex;

    min-width: 150px;
    min-height: 52px;

    padding: 6px 10px;

    border-radius: 9px;
}

.acceso:last-child .acceso-icono {
    width: 28px;
    height: 28px;
    font-size: 20px;
}

.acceso:last-child .acceso-texto strong {
    font-size: 10px;
}

.acceso:last-child .acceso-texto small {
    font-size: 7px;
    margin-top: 3px;
}

    .boton-menu {
        display: block;
        margin-left: auto;
    }

    .hero {
        min-height: 700px;
        align-items: flex-start;
    }

    .hero-imagen img {
        width: 100%;
        height: 58%;
        top: auto;
        bottom: 0;
        object-position: center;
    }

    .hero-luz {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.97) 45%,
                rgba(255,255,255,.2) 78%,
                rgba(255,255,255,0) 100%
            );
    }

    .hero-contenido {
        width: 100%;
        margin: 0;
        padding:
            38px
            7vw;

        text-align: center;
    }

    .hero-logo img {
        width: 120px;
        height: 120px;
    }

    .hero-etiqueta {
        font-size: 8px;
    }

    .hero h1 {
        font-size: 37px;
        letter-spacing: -.8px;
    }

    .hero-separador {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-botones {
        justify-content: center;
    }

    .frase-hero {
        display: none;
    }

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

    .titulo-seccion {
        display: block;
    }

    .titulo-seccion p {
        margin:
            7px 0
            0;
    }

    .nosotros {
        padding:
            45px 7vw;
    }

    .nosotros-frase {
        display: none;
    }

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

    .valor {
        padding: 15px;
        border-bottom:
            1px solid
            rgba(20,132,61,.20);
    }

    .matriz-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

}


@media (max-width: 480px) {

    .marca-texto {
        display: none;
    }

    .hero {
        min-height: 680px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero-descripcion {
        font-size: 16px;
    }

    .hero-botones {
        flex-direction: column;
        width: 100%;
    }

    .boton {
        width: 100%;
    }

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

    .servicio {
        min-height: 125px;
    }

    .titulo-seccion h2 {
        font-size: 29px;
    }

    .valores {
        grid-template-columns: 1fr;
    }

    .valor {
        border-right: 0;
    }

    .contacto {
        padding:
            35px 7vw;
    }

}