/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16/08/2026, 11:18:45 PM
    Author     : OsberRuiz
*/

/* ==========================================================
   TWO MEDICS
   ESTILOS PRINCIPALES
========================================================== */

:root {

    --tm-primary: #0d6efd;
    --tm-primary-dark: #062b63;

    --tm-dark: #061b3a;

    --tm-text: #183153;

    --tm-light: #f5f8fc;

    --tm-white: #ffffff;

    --tm-border: #e7edf5;

}


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

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--tm-text);

    background: var(--tm-light);

}

a {
    text-decoration: none;
}


/* ==========================================================
   NAVBAR
========================================================== */

.tm-navbar {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(3, 27, 58, 0.92);

    backdrop-filter: blur(10px);

    border-bottom:
        1px solid rgba(255,255,255,.10);

}


.tm-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    color: white !important;

}


.tm-logo {

    width: 42px;
    height: 42px;

    border-radius: 7px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: white;

    color: var(--tm-primary);

    font-size: 22px;

}


.tm-brand-title {

    display: block;

    font-size: 20px;

    font-weight: 800;

    line-height: 20px;

}


.tm-brand small {

    font-size: 10px;

    letter-spacing: 1px;

    opacity: .85;

}


.tm-navbar .nav-link {

    color: rgba(255,255,255,.9);

    font-weight: 600;

    padding:
        25px 14px;

    transition: .3s;

}


.tm-navbar .nav-link:hover,
.tm-navbar .nav-link.active {

    color: #4db8ff;

}


.tm-btn-login {

    background:
        var(--tm-primary);

    color: white !important;

    border-radius: 6px;

    padding:
        10px 20px;

    font-weight: 700;

    transition: .3s;

}


.tm-btn-login:hover {

    background: #0b5ed7;

    transform:
        translateY(-2px);

}


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

.tm-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    background-image:
        url("../Views/img/fondo-prin.jfif");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.tm-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.05) 25%,
            rgba(2,22,48,.35) 50%,
            rgba(2,22,48,.92) 100%
        );

}


.tm-hero-content {

    position: relative;

    z-index: 2;

    padding-top: 80px;

}


.tm-hero-text {

    color: white;

    padding:
        40px 0;

}


.tm-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 15px;

    border-radius: 30px;

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

    border:
        1px solid rgba(255,255,255,.25);

    font-size: 13px;

    margin-bottom: 20px;

}


.tm-hero h1 {

    font-size:
        clamp(38px, 4vw, 58px);

    line-height: 1.05;

    font-weight: 800;

    margin-bottom: 22px;

}


.tm-hero h1 span {

    display: block;

    color: #36a9ff;

}


.tm-hero p {

    font-size: 17px;

    line-height: 1.7;

    max-width: 580px;

    color:
        rgba(255,255,255,.9);

}


.tm-hero-buttons {

    display: flex;

    gap: 12px;

    margin-top: 30px;

}


.tm-btn-primary {

    background:
        var(--tm-primary);

    color: white;

    border: none;

    border-radius: 6px;

    padding:
        13px 24px;

    font-weight: 700;

    transition: .3s;

}


.tm-btn-primary:hover {

    background: #0b5ed7;

    color: white;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(13,110,253,.3);

}


.tm-btn-outline {

    color: white;

    border:
        1px solid rgba(255,255,255,.8);

    border-radius: 6px;

    padding:
        13px 24px;

    font-weight: 700;

}


.tm-btn-outline:hover {

    background: white;

    color: var(--tm-dark);

}


.tm-hero-features {

    display: flex;

    gap: 35px;

    margin-top: 38px;

}


.tm-hero-features div {

    display: flex;

    align-items: center;

    gap: 10px;

}


.tm-hero-features i {

    color: #37b9ff;

    font-size: 25px;

}


.tm-hero-features span {

    font-size: 12px;

    font-weight: 600;

}


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

.tm-section {

    padding:
        90px 0;

}


.tm-section-white {

    background: white;

}


.tm-section-light {

    background:
        var(--tm-light);

}


.tm-section-title {

    text-align: center;

    max-width: 850px;

    margin:
        0 auto 55px;

}


.tm-section-title span {

    color:
        var(--tm-primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.tm-section-title h2 {

    font-size: 32px;

    font-weight: 800;

    margin:
        10px 0 15px;

    color:
        var(--tm-dark);

}


.tm-section-title strong {

    color:
        var(--tm-primary);

}


.tm-section-title p {

    color: #64748b;

    line-height: 1.7;

}


/* ==========================================================
   TARJETAS INFORMACIÓN
========================================================== */

.tm-info-card {

    background: white;

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

    border-radius: 15px;

    padding: 35px 30px;

    text-align: center;

    height: 100%;

    transition: .3s;

    box-shadow:
        0 5px 25px rgba(0,0,0,.04);

}


.tm-info-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.10);

}


.tm-card-icon {

    width: 70px;
    height: 70px;

    margin:
        0 auto 20px;

    border-radius: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 30px;

}


.tm-card-icon.blue {

    background: #e7f1ff;

    color:
        #0d6efd;

}


.tm-card-icon.green {

    background: #e5f8f4;

    color:
        #16a085;

}


.tm-card-icon.purple {

    background: #f2eaff;

    color:
        #8e44ad;

}


.tm-info-card h3 {

    font-size: 20px;

    font-weight: 700;

}


.tm-info-card p {

    color: #6b7280;

    line-height: 1.7;

}


/* ==========================================================
   FEATURES
========================================================== */

.tm-feature {

    text-align: center;

    padding:
        20px 8px;

}


.tm-feature i {

    font-size: 35px;

    color:
        var(--tm-primary);

    margin-bottom: 18px;

}


.tm-feature h4 {

    font-size: 16px;

    font-weight: 700;

    color:
        var(--tm-dark);

}


.tm-feature p {

    font-size: 13px;

    color: #64748b;

    line-height: 1.5;

}


/* ==========================================================
   ESPECIALIDADES
========================================================== */

.tm-specialty-card {

    overflow: hidden;

    border-radius: 12px;

    background: white;

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

    box-shadow:
        0 5px 20px rgba(0,0,0,.05);

    transition: .3s;

}


.tm-specialty-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.12);

}


.tm-specialty-card img {

    width: 100%;

    height: 130px;

    object-fit: cover;

    display: block;

}


.tm-specialty-card div {

    padding:
        14px;

    text-align: center;

    font-weight: 700;

    font-size: 14px;

}


.tm-btn-secondary {

    border:
        1px solid var(--tm-primary);

    color:
        var(--tm-primary);

    padding:
        12px 24px;

    border-radius: 6px;

    font-weight: 700;

}


.tm-btn-secondary:hover {

    background:
        var(--tm-primary);

    color: white;

}


/* ==========================================================
   PASOS
========================================================== */

.tm-step {

    text-align: center;

    position: relative;

    padding:
        15px;

}


.tm-step-number {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        #0d6efd;

    color: white;

    font-weight: 800;

}


.tm-step-number.green {

    background:
        #16a085;

}


.tm-step-number.orange {

    background:
        #f39c12;

}


.tm-step-number.purple {

    background:
        #8e44ad;

}


.tm-step > i {

    font-size: 32px;

    color:
        var(--tm-dark);

    margin-bottom: 15px;

}


.tm-step h4 {

    font-size: 17px;

    font-weight: 700;

}


.tm-step p {

    font-size: 13px;

    color: #64748b;

    line-height: 1.6;

}


/* ==========================================================
   ESTADÍSTICAS
========================================================== */

.tm-stats {

    padding:
        45px 0;

    background:
        var(--tm-dark);

    color: white;

}


.tm-stat {

    padding: 10px;

}


.tm-stat i {

    display: block;

    color:
        #38bdf8;

    font-size: 28px;

    margin-bottom: 10px;

}


.tm-stat strong {

    display: block;

    font-size: 30px;

    font-weight: 800;

}


.tm-stat span {

    display: block;

    color:
        rgba(255,255,255,.75);

    font-size: 13px;

}


/* ==========================================================
   LOGIN CTA
========================================================== */

.tm-login-cta {

    padding:
        80px 0;

    background: white;

}


.tm-cta-box {

    border-radius: 20px;

    padding:
        55px;

    background:
        linear-gradient(
            135deg,
            #edf6ff,
            #ffffff
        );

    border:
        1px solid #dcecff;

}


.tm-cta-small {

    color:
        var(--tm-primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.tm-cta-box h2 {

    font-size: 35px;

    color:
        var(--tm-dark);

    font-weight: 800;

    max-width: 600px;

    margin:
        10px 0 15px;

}


.tm-cta-box p {

    color: #64748b;

    margin-bottom: 25px;

}


/* ==========================================================
   FOOTER
========================================================== */

.tm-footer {

    background:
        #03152f;

    color: white;

    padding:
        60px 0 25px;

}


.tm-footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}


.tm-footer-brand > i {

    font-size: 35px;

    color:
        #38bdf8;

}


.tm-footer-brand strong {

    display: block;

    font-size: 20px;

}


.tm-footer-brand small {

    display: block;

    font-size: 10px;

    letter-spacing: 1px;

}


.tm-footer p {

    color:
        rgba(255,255,255,.65);

}


.tm-footer h5 {

    font-size: 15px;

    margin-bottom: 20px;

}


.tm-footer a {

    display: block;

    color:
        rgba(255,255,255,.65);

    margin-bottom: 10px;

    font-size: 13px;

    transition: .3s;

}


.tm-footer a:hover {

    color:
        #38bdf8;

}


.tm-social {

    display: flex;

    gap: 10px;

    margin-top: 20px;

}


.tm-social a {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

}


.tm-footer hr {

    border-color:
        rgba(255,255,255,.1);

    margin:
        35px 0 20px;

}


.tm-footer-bottom {

    text-align: center;

    font-size: 12px;

    color:
        rgba(255,255,255,.5);

}


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

@media (max-width: 991px) {

    .tm-navbar {

        position: fixed;

    }

    .tm-navbar .nav-link {

        padding:
            10px 0;

    }

    .tm-hero {

        min-height: 750px;

    }

    .tm-hero-overlay {

        background:
            rgba(2,22,48,.72);

    }

    .tm-hero-text {

        text-align: center;

    }

    .tm-hero p {

        margin:
            0 auto;

    }

    .tm-hero-buttons {

        justify-content: center;

    }

    .tm-hero-features {

        justify-content: center;

    }

}


@media (max-width: 576px) {

    .tm-hero {

        min-height: 800px;

    }

    .tm-hero h1 {

        font-size: 38px;

    }

    .tm-hero-features {

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }

    .tm-hero-buttons {

        flex-direction: column;

    }

    .tm-hero-buttons .btn {

        width: 100%;

    }

    .tm-section {

        padding:
            65px 0;

    }

    .tm-section-title h2 {

        font-size: 26px;

    }

    .tm-cta-box {

        padding: 35px 25px;

        text-align: center;

    }

    .tm-cta-box h2 {

        font-size: 28px;

    }
    

    
}

/* =========================================================
   AJUSTE DE COLOR - TWO MEDICS
   Solo navbar y hero
   ========================================================= */

/* FRANJA SUPERIOR */
.tm-navbar {
    background: #17a2b8;
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}

/* Logo */
.tm-logo {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

.tm-brand-title {
    color: #ffffff;
}

.tm-brand small {
    color: rgba(255, 255, 255, .85);
}

/* Menú superior */
.tm-navbar .nav-link {
    color: rgba(255, 255, 255, .90);
}

.tm-navbar .nav-link:hover,
.tm-navbar .nav-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, .15);
}

/* Botón LOGIN */
.tm-btn-login {
    background: #ffffff;
    border-color: #ffffff;
    color: #117a8b !important;
}

.tm-btn-login:hover {
    background: #e8f8fb;
    border-color: #e8f8fb;
    color: #117a8b !important;
}


/* ==========================================================
   HERO TWO MEDICS
========================================================== */

.tm-hero {

    position: relative;

    width: 100%;

    min-height: 620px;

    display: grid;

    grid-template-columns: 54% 46%;

    overflow: hidden;

    background: #eaf8fb;
}


/* ==========================================================
   LADO IZQUIERDO - IMAGEN
========================================================== */

.tm-hero-left {

    position: relative;

    min-height: 620px;

    background-image:
        url("../Views/img/login2.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    overflow: hidden;
}


/* ==========================================================
   CAPA SUAVE SOBRE LA IMAGEN
========================================================== */

.tm-hero-left-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23,162,184,.02),
            rgba(23,162,184,.10)
        );

    pointer-events: none;
}


/* ==========================================================
   LADO DERECHO
========================================================== */

.tm-hero-right {

    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    padding: 55px 7%;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #effbfd 50%,
            #dff5f8 100%
        );

    overflow: hidden;
}


/* ==========================================================
   DECORACIÓN
========================================================== */

.tm-hero-right::before {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    top: -260px;

    right: -170px;

    border-radius: 50%;

    border:
        70px solid
        rgba(23,162,184,.055);

    pointer-events: none;
}


.tm-hero-right::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    bottom: -170px;

    right: 30px;

    border-radius: 50%;

    border:
        45px solid
        rgba(13,110,253,.035);

    pointer-events: none;
}


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

.tm-hero-text {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 620px;
}


/* ==========================================================
   BADGE
========================================================== */

.tm-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 16px;

    margin-bottom: 22px;

    border:
        1px solid
        rgba(23,162,184,.30);

    border-radius: 30px;

    background: #ffffff;

    color: #117a8b;

    font-size: 13px;

    font-weight: 600;

    box-shadow:
        0 4px 15px
        rgba(23,162,184,.08);
}


.tm-hero-badge i {

    color: #17a2b8;
}


/* ==========================================================
   TÍTULO
========================================================== */

.tm-hero-text h1 {

    margin: 0 0 22px;

    color: #17324d;

    font-size:
        clamp(
            40px,
            4vw,
            58px
        );

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -1.2px;
}


.tm-hero-text h1 span {

    display: block;

    color: #17a2b8;
}


/* ==========================================================
   DESCRIPCIÓN
========================================================== */

.tm-hero-text > p {

    max-width: 590px;

    margin: 0 0 28px;

    color: #617585;

    font-size: 16px;

    line-height: 1.7;
}


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

.tm-hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 34px;
}


/* ==========================================================
   BOTÓN PRINCIPAL
========================================================== */

.tm-hero .tm-btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 24px;

    border:
        1px solid #17a2b8;

    border-radius: 8px;

    background: #17a2b8;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    transition: all .25s ease;
}


.tm-hero .tm-btn-primary:hover {

    background: #117a8b;

    border-color: #117a8b;

    color: #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(17,122,139,.25);
}


/* ==========================================================
   BOTÓN LOGIN
========================================================== */

.tm-hero .tm-btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 24px;

    border:
        1px solid #17a2b8;

    border-radius: 8px;

    background: transparent;

    color: #117a8b;

    font-size: 14px;

    font-weight: 700;

    transition: all .25s ease;
}


.tm-hero .tm-btn-outline:hover {

    background: #17a2b8;

    border-color: #17a2b8;

    color: #ffffff;

    transform:
        translateY(-2px);
}


/* ==========================================================
   MINI CARACTERÍSTICAS
========================================================== */

.tm-hero-features {

    display: flex;

    align-items: center;

    gap: 32px;
}


.tm-hero-features > div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #425d70;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.35;
}


.tm-hero-features i {

    flex-shrink: 0;

    color: #17a2b8;

    font-size: 25px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .tm-hero {

        grid-template-columns:
            50% 50%;
    }


    .tm-hero-right {

        padding:
            45px 5%;
    }


    .tm-hero-text h1 {

        font-size: 45px;
    }


    .tm-hero-features {

        gap: 18px;
    }

}


/* ==========================================================
   TABLET PEQUEÑA
========================================================== */

@media (max-width: 991px) {

    .tm-hero {

        display: block;

        min-height: auto;
    }


    .tm-hero-left {

        min-height: 430px;

        height: 430px;
    }


    .tm-hero-right {

        min-height: auto;

        padding:
            55px 30px;
    }


    .tm-hero-text {

        max-width: 700px;

        margin: 0 auto;

        text-align: center;
    }


    .tm-hero-text > p {

        margin-left: auto;

        margin-right: auto;
    }


    .tm-hero-buttons {

        justify-content: center;
    }


    .tm-hero-features {

        justify-content: center;
    }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 575px) {

    .tm-hero-left {

        min-height: 300px;

        height: 300px;
    }


    .tm-hero-right {

        padding:
            40px 20px;
    }


    .tm-hero-text h1 {

        font-size: 34px;

        letter-spacing:
            -.5px;
    }


    .tm-hero-text > p {

        font-size: 14px;
    }


    .tm-hero-buttons {

        flex-direction: column;

        width: 100%;
    }


    .tm-hero .tm-btn-primary,
    .tm-hero .tm-btn-outline {

        width: 100%;
    }


    .tm-hero-features {

        flex-direction: column;

        align-items: center;

        gap: 17px;
    }

}

.tm-logo {
    width: 118px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2px;

    /*border-radius: 8px;*/
    background: white;
    /*background: rgba(255, 255, 255, .18);*/
}

.tm-logo-img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}