/*==================================================================
PROYECTO   : MAXALUD
MÓDULO     : AGENDA MÉDICA
ARCHIVO    : 02-search.css
VERSIÓN    : 1.0
AUTOR      : Carlos A. Bello Vanegas / ChatGPT
DESCRIPCIÓN: Buscador Inteligente de Agenda Médica
==================================================================*/

/*==================================================================
COMPONENTE 02
BUSCADOR
==================================================================*/

.search{

    padding:140px 0 60px;

    background:var(--color-fondo);

}


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

.search__header{

    max-width:760px;

    margin:0 auto 35px;

    text-align:center;

}


/*==================================================================
BADGE AGENDA MEDICA INTELIGENTE
==================================================================*/

.search__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(24,181,58,.10);

    color:var(--color-verde);

    font-size:13px;

    font-weight:600;

    margin-bottom:5px;

}


/*==================================================================
TITULO AGENDA TU CITA
==================================================================*/

.search__title{

    margin-bottom:5px;

    font-family:var(--font-titulo);

    font-size:3rem;

    font-weight:700;

    line-height:1.15;

    color:var(--color-texto);

}


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

.search__description{

    max-width:700px;

    margin:0 auto;

    font-size:1.08rem;

    line-height:1.9;

    color:var(--color-gris);

}


/*==================================================================
CAJA DEL BUSCADOR
==================================================================*/

.search__box{

    max-width:600px;

    margin:0 auto;

    height:74px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:0 28px;

    background:var(--color-blanco);

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

    border-radius:18px;

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    transition:.35s;

}


/*==================================================================
FOCUS
==================================================================*/

.search__box:focus-within{

    border-color:var(--color-secundario);

    box-shadow:0 20px 55px rgba(25,167,206,.18);

}


/*==================================================================
ICONO
==================================================================*/

.search__box i{

    font-size:22px;

    color:var(--color-secundario);

}


/*==================================================================
INPUT
==================================================================*/

.search__box input{

    width:100%;

    border:none;

    outline:none;

    background:none;

    font-family:var(--font-principal);

    font-size:17px;

    color:var(--color-texto);

}


.search__box input::placeholder{

    color:#94A3B8;

}

/*==================================================================
PROYECTO   : MAXALUD
MÓDULO     : AGENDA MÉDICA
ARCHIVO    : 03-especialidades.css
VERSIÓN    : 1.0
AUTOR      : Carlos A. Bello Vanegas / ChatGPT
DESCRIPCIÓN: Componente Especialidades Médicas
==================================================================*/


/*==================================================================
COMPONENTE 03
ESPECIALIDADES
==================================================================*/

.especialidades{

    padding:20px 0;

    background:var(--color-blanco);

}


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

.especialidades__header{

    max-width:700px;

    margin:0 auto 20px;

    text-align:center;

}

.especialidades__title{

    margin-bottom:12px;

    font-family:var(--font-titulo);

    font-size:2.8rem;

    font-weight:700;

    color:var(--color-texto);

}

.especialidades__description{

    font-size:1.05rem;

    line-height:1.70;

    color:var(--color-gris);

}


/*==================================================================
GRID
==================================================================*/

.especialidades__grid{

    display:grid;

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

    gap:30px;

}


/*==================================================================
CARD
==================================================================*/

.especialidad-card{

    background:var(--color-blanco);

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

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    transition:.35s ease;

    cursor:pointer;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}


/*==================================================================
HOVER
==================================================================*/

.especialidad-card:hover{

    transform:translateY(-10px);

    border-color:var(--color-secundario);

    box-shadow:0 20px 45px rgba(25,167,206,.18);

}


/*==================================================================
ICONO
==================================================================*/

.especialidad-card__icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(25,167,206,.10);

    transition:.35s;

}

.especialidad-card__icon i{

    font-size:38px;

    color:var(--color-secundario);

    transition:.35s;

}


/*==================================================================
HOVER ICONO
==================================================================*/

.especialidad-card:hover .especialidad-card__icon{

    background:var(--color-secundario);

}

.especialidad-card:hover .especialidad-card__icon i{

    color:var(--color-blanco);

}


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

.especialidad-card h3{

    margin:0;

    font-family:var(--font-titulo);

    font-size:1.30rem;

    font-weight:700;

    color:var(--color-texto);

}


/*==================================================================
ANIMACIÓN
==================================================================*/

.especialidad-card{

    animation:fadeCard .7s ease;

}

@keyframes fadeCard{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}