:root{

    --psyfeel-blue:#133286;

    --psyfeel-action:#2F80ED;

    --psyfeel-dark:#1E0E62;

    --psyfeel-soft:#f7f9ff;

    --psyfeel-yellow:#FBFFE5;

    --psyfeel-orange:#ffb326;

    --psyfeel-text:#4d5562;

    --psyfeel-muted:#667085;

    --psyfeel-border:#e7eaf0;

}



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



html,
body{

    width:100%;

    overflow-x:hidden;

    background:#fff;

    color:var(--psyfeel-text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}



img{

    max-width:100%;

}





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


#header{

    position:relative;

    width:100%;

}



.menu{

    position:fixed;

    top:0;

    left:0;

    z-index:9999;


    width:100%;

    height:143px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 4%;


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


    border-bottom:
        1px solid rgba(231,234,240,.8);


    backdrop-filter:blur(10px);

}



.logo-box img{

    width:153px;

    height:auto;

    display:block;

}



.list-container{

    width:min(
        720px,
        70%
    );

}



.lists{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:18px;


    list-style:none;

}



.lists a{

    padding:8px 10px;


    color:var(--psyfeel-dark);


    text-decoration:none;


    font-size:15px;

    font-weight:600;


    border-radius:10px;


    transition:.2s ease;

}



.lists a:hover{

    background:var(--psyfeel-soft);

    color:var(--psyfeel-blue);

}



.btn-menu{

    display:none;

}



#btn-menu-desplegable{

    width:40px;

    height:40px;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:0;


    border:0;

    background:#fff;


    cursor:pointer;

}



#imagenmenu{

    width:30px;

    height:30px;


    object-fit:contain;


    display:block;

}



.menudesplegable{

    position:fixed;


    top:143px;

    left:10000px;


    z-index:100000;


    width:100%;

    height:
        calc(
            100vh - 143px
        );


    padding:30px;


    background:#fff;


    text-align:center;

}



.listadodesple{

    list-style:none;

}



.listadodesple li{

    margin:16px 0;

}



.listadodesple a{

    color:var(--psyfeel-dark);


    text-decoration:none;


    font-size:19px;

    font-weight:600;

}



.listadodesple hr{

    width:min(
        500px,
        80%
    );


    margin:auto;


    border:0;

    border-top:
        1px solid
        var(--psyfeel-border);

}





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


.img-header{

    width:100%;

    max-width:1280px;

    min-height:570px;


    margin:
        143px auto 0;


    padding:
        65px 7%;


    display:grid;


    grid-template-columns:
        1.05fr
        .95fr;


    align-items:center;


    gap:65px;


    background:
        linear-gradient(
            135deg,
            #fbffe6 0%,
            #fff 60%
        );


    border-radius:
        0 0 40px 40px;

}



.img-header .welcome{

    min-width:0;

}



.img-header .centrado{

    max-width:610px;

}



.img-header .welcome h1{

    margin:
        0 0 14px;


    padding:0;


    font-size:16px;

    line-height:1.3;

    letter-spacing:.02em;


    font-weight:700;


    color:#545454;

}



.img-header .welcome h2{

    margin:
        0 0 22px;


    color:
        var(--psyfeel-blue);


    font-size:38px;

    line-height:1.16;


    letter-spacing:-.02em;


    font-weight:750;

}



.img-header .welcome p{

    margin:
        0 0 24px;


    color:#545454;


    font-size:17px;

    line-height:1.7;

}



.hero-contacto{

    min-width:150px;


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:
        13px 19px;


    color:#fff;


    background:
        var(--psyfeel-action);


    border:0;

    border-radius:12px;


    font-size:15px;

    font-weight:700;


    cursor:pointer;


    box-shadow:
        0 8px 22px
        rgba(47,128,237,.22);


    transition:.2s ease;

}



.hero-contacto:hover{

    background:#1f69d5;


    transform:
        translateY(-2px);

}



.estrellas-hero{

    width:125px;


    height:auto;


    display:block;


    margin:
        21px 0 8px;

}



#sesiongratis{

    display:block;


    color:#545454;


    font-size:14px;

    font-weight:650;

}



.imagen-header img{

    width:100%;


    height:auto;


    display:block;


    border-radius:28px;


    box-shadow:
        0 18px 50px
        rgba(19,50,134,.12);

}





/* =========================================================
   AUTORIDAD
========================================================= */


.psyfeel-mini-authority{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        28px auto 85px;


    padding:
        17px 24px;


    display:flex;


    align-items:center;

    justify-content:center;


    flex-wrap:wrap;


    gap:
        12px 30px;


    background:#fff;


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


    border-radius:16px;


    box-shadow:
        0 8px 25px
        rgba(19,50,134,.05);

}



.psyfeel-mini-authority span{

    display:flex;


    align-items:center;


    gap:8px;


    color:#4b5563;


    font-size:13.5px;

    font-weight:650;

}



.psyfeel-mini-authority svg{

    width:17px;

    height:17px;


    fill:
        var(--psyfeel-orange);

}





/* =========================================================
   TITULITOS
========================================================= */


.section-eyebrow,
.ubicaciones-eyebrow,
.reviews-etiqueta,
.medios-eyebrow{

    display:block;


    margin-bottom:11px;


    color:
        var(--psyfeel-orange);


    font-size:12px;

    line-height:1.3;


    font-weight:800;


    letter-spacing:.12em;

}





/* =========================================================
   EQUIPO
========================================================= */


#beneficios{

    width:100%;


    padding:
        10px 0 90px;


    background:#fff;

}



.intermedio-centrado-titulo{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 40px;


    text-align:center;

}



#beneficios .titulo{

    max-width:760px;


    margin:auto;

}



#beneficios .titulo h2{

    margin:
        0 0 15px;


    color:
        var(--psyfeel-blue);


    font-size:36px;

    line-height:1.2;

}



#beneficios .titulo p{

    color:
        var(--psyfeel-text);


    font-size:16.5px;

    line-height:1.7;

}



.psicologos{

    width:
        min(
            1040px,
            calc(100% - 40px)
        );


    margin:auto;


    display:grid;


    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );


    gap:28px;

}



.psicologo{

    overflow:hidden;


    display:flex;


    flex-direction:column;


    background:#fff;


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


    border-radius:20px;


    box-shadow:
        0 12px 35px
        rgba(19,50,134,.07);

}



.psicologo > img{

    width:100%;


    height:390px;


    display:block;


    object-fit:contain;

    object-position:
        center top;


    background:#fff;

}



.psicologo-body{

    flex:1;


    display:flex;


    flex-direction:column;


    padding:25px;

}



.psicologo-localizacion{

    margin-bottom:8px;


    color:
        var(--psyfeel-orange);


    font-size:11px;


    font-weight:800;


    letter-spacing:.08em;


    text-transform:uppercase;

}



.psicologo h3{

    margin:
        0 0 14px;


    color:
        var(--psyfeel-blue);


    font-size:25px;

    line-height:1.25;

}



.psicologo-dato{

    margin:3px 0;


    color:
        var(--psyfeel-muted);


    font-size:14px;

    line-height:1.5;

}



.psicologo-descripcion{

    margin:
        18px 0 22px;


    color:
        var(--psyfeel-text);


    font-size:15px;

    line-height:1.65;

}



.precios-card{

    display:grid;


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


    gap:8px;


    margin-top:auto;


    margin-bottom:18px;

}



.precios-card > div{

    padding:
        12px 9px;


    background:
        var(--psyfeel-soft);


    border:
        1px solid #edf0f6;


    border-radius:12px;


    text-align:center;

}



.precios-card span{

    min-height:34px;


    display:flex;


    align-items:center;

    justify-content:center;


    color:#6b7280;


    font-size:11px;

    line-height:1.35;

}



.precios-card strong{

    display:block;


    margin-top:5px;


    color:
        var(--psyfeel-blue);


    font-size:14px;

}



.aviso-disponibilidad{

    display:none;


    margin:
        0 0 14px;


    color:#9a3412;


    font-size:13px;

}



.psicologo-acciones{

    display:grid;


    grid-template-columns:
        1fr 1fr;


    gap:10px;

}



.sabermas,
.contactar-card{

    min-height:43px;


    display:flex;


    align-items:center;

    justify-content:center;


    padding:
        10px 14px;


    border-radius:11px;


    font-size:13.5px;


    font-weight:700;


    text-decoration:none;


    cursor:pointer;

}



.sabermas{

    color:
        var(--psyfeel-blue);


    background:#fff;


    border:
        1px solid #dfe5ef;

}



.sabermas:hover{

    background:
        var(--psyfeel-soft);

}



.contactar-card{

    color:#fff;


    background:
        var(--psyfeel-action);


    border:
        1px solid
        var(--psyfeel-action);

}



.contactar-card:hover{

    background:#1f69d5;

}





/* =========================================================
   TERAPIA
========================================================= */


.comoes{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        10px auto 80px;


    padding:
        52px 60px;


    background:
        var(--psyfeel-soft);


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


    border-radius:24px;

}



.comoes h2{

    max-width:760px;


    margin:
        0 0 24px;


    color:
        var(--psyfeel-blue);


    font-size:34px;

    line-height:1.2;

}



.comoes p{

    max-width:900px;


    margin:
        0 0 17px;


    color:
        var(--psyfeel-text);


    font-size:16px;

    line-height:1.75;

}



.comoes p:last-child{

    margin-bottom:0;

}





/* =========================================================
   PROCESO
========================================================= */


.proceso-terapia{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 90px;


    text-align:center;

}



.proceso-terapia h2{

    margin:
        0 0 34px;


    color:
        var(--psyfeel-blue);


    font-size:34px;

    line-height:1.2;

}



.listado-proceso{

    list-style:none;


    display:grid;


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


    gap:16px;

}



.listado-proceso li{

    min-height:210px;


    padding:
        24px 20px;


    background:#fff;


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


    border-radius:18px;


    text-align:left;


    box-shadow:
        0 8px 25px
        rgba(19,50,134,.045);

}



.listado-proceso li > span{

    width:38px;

    height:38px;


    display:flex;


    align-items:center;

    justify-content:center;


    margin-bottom:20px;


    color:
        var(--psyfeel-blue);


    background:#fff7dd;


    border-radius:50%;


    font-size:12px;


    font-weight:800;

}



.listado-proceso strong{

    display:block;


    margin-bottom:9px;


    color:
        var(--psyfeel-dark);


    font-size:16px;

}



.listado-proceso p{

    color:
        var(--psyfeel-muted);


    font-size:14px;

    line-height:1.6;

}





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


.especialidades{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 90px;

}



.especialidades-texto{

    max-width:760px;


    margin:
        0 auto 35px;


    text-align:center;

}



.especialidades-texto h2{

    margin:
        0 0 15px;


    color:
        var(--psyfeel-blue);


    font-size:36px;

    line-height:1.2;

}



.especialidades-texto p{

    color:
        var(--psyfeel-text);


    font-size:16px;

    line-height:1.7;

}



.especialidades-listado{

    display:grid;


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


    gap:12px;

}



.especialidades-listado a{

    min-height:68px;


    display:flex;


    align-items:center;


    padding:
        15px 18px;


    color:
        var(--psyfeel-blue);


    background:#fff;


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


    border-radius:14px;


    text-decoration:none;


    transition:.2s ease;

}



.especialidades-listado a:hover{

    background:
        var(--psyfeel-soft);


    transform:
        translateY(-2px);

}



.especialidades-listado h3{

    font-size:15px;

    line-height:1.35;

}





/* =========================================================
   CONFIANZA
========================================================= */


.bannerconfianza{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 80px;


    padding:
        46px 52px;


    background:
        var(--psyfeel-blue);


    color:#fff;


    border-radius:24px;

}



.bannerconfianza .centro{

    display:grid;


    grid-template-columns:
        1.35fr .65fr;


    align-items:center;


    gap:45px;

}



.bannerconfianza h2{

    margin:
        0 0 15px;


    color:#fff;


    font-size:32px;

    line-height:1.2;

}



.bannerconfianza p{

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


    font-size:16px;

    line-height:1.7;

}



.bannerconfianza .imgs{

    text-align:center;

}



.bannerconfianza .imgs img{

    max-width:230px;

    max-height:135px;


    object-fit:contain;

}



.confianza-psyfeel{

    width:
        min(
            900px,
            calc(100% - 40px)
        );


    margin:
        0 auto 90px;


    text-align:center;

}



.confianza-psyfeel h2{

    margin:
        0 0 18px;


    color:
        var(--psyfeel-blue);


    font-size:34px;

    line-height:1.2;

}



.confianza-psyfeel p{

    color:
        var(--psyfeel-text);


    font-size:16px;

    line-height:1.75;

}





/* =========================================================
   UBICACIÓN
========================================================= */


.ubicaciones-salamanca{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 90px;

}



.ubicaciones-cabecera{

    max-width:760px;


    margin:
        0 auto 38px;


    text-align:center;

}



.ubicaciones-cabecera h2{

    margin:
        0 0 14px;


    color:
        var(--psyfeel-blue);


    font-size:36px;

    line-height:1.15;

}



.ubicaciones-cabecera p{

    color:
        var(--psyfeel-text);


    font-size:16px;

    line-height:1.7;

}



.ubicaciones-grid{

    display:grid;


    grid-template-columns:
        .78fr
        1.22fr;


    gap:22px;

}



.ubicacion-item{

    width:100%;

    height:100%;


    padding:28px;


    background:#fff;


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


    border-radius:18px;


    box-shadow:
        0 8px 25px
        rgba(19,50,134,.05);

}



.ubicacion-label{

    display:block;


    margin-bottom:10px;


    color:
        var(--psyfeel-orange);


    font-size:11px;


    font-weight:800;


    letter-spacing:.08em;

}



.ubicacion-item h3{

    margin:
        0 0 8px;


    color:
        var(--psyfeel-blue);


    font-size:22px;

}



.ubicacion-direccion,
.ubicacion-horario{

    color:
        var(--psyfeel-muted);


    font-size:14px;

    line-height:1.5;

}



.ubicacion-profesionales{

    margin:
        20px 0;


    display:flex;


    flex-direction:column;


    gap:7px;

}



.ubicacion-profesionales span{

    width:max-content;


    padding:
        7px 10px;


    color:
        var(--psyfeel-blue);


    background:
        var(--psyfeel-soft);


    border-radius:100px;


    font-size:12px;


    font-weight:650;

}



.ubicaciones-mapa{

    min-height:420px;


    overflow:hidden;


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


    border-radius:18px;


    box-shadow:
        0 8px 25px
        rgba(19,50,134,.05);

}



.ubicaciones-mapa iframe{

    width:100%;

    height:100%;


    min-height:420px;


    display:block;

}





/* =========================================================
   OPINIONES
========================================================= */


.reviews{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 90px;

}



.reviews-cabecera{

    max-width:760px;


    margin:
        0 auto 34px;


    text-align:center;

}



.reviews-cabecera h2{

    margin:
        0 0 14px;


    color:
        var(--psyfeel-blue);


    font-size:36px;

    line-height:1.2;

}



.reviews-intro{

    color:
        var(--psyfeel-text);


    font-size:16px;

    line-height:1.7;

}



.reviews-contenido{

    min-height:180px;

}





/* =========================================================
   MEDIOS
========================================================= */


.medios-psyfeel{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 90px;


    padding:
        44px 0 50px;


    overflow:hidden;


    background:
        var(--psyfeel-soft);


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


    border-radius:24px;

}



.medios-logos{

    position:relative;


    width:100%;


    overflow:hidden;


    margin-bottom:38px;


    padding:
        16px 0;

}



.medios-logos::before,
.medios-logos::after{

    content:"";


    position:absolute;


    top:0;


    z-index:2;


    width:80px;

    height:100%;


    pointer-events:none;

}



.medios-logos::before{

    left:0;


    background:
        linear-gradient(
            90deg,
            var(--psyfeel-soft),
            rgba(247,249,255,0)
        );

}



.medios-logos::after{

    right:0;


    background:
        linear-gradient(
            270deg,
            var(--psyfeel-soft),
            rgba(247,249,255,0)
        );

}



.medios-logos-track{

    width:max-content;


    display:flex;


    align-items:center;


    gap:58px;


    animation:
        mediosScroll
        28s
        linear
        infinite;


    will-change:transform;

}



.medio-logo{

    width:210px;

    height:80px;


    flex:
        0 0 auto;


    display:flex;


    align-items:center;

    justify-content:center;

}



.medio-logo img{

    max-width:100%;

    max-height:68px;


    width:auto;

    height:auto;


    object-fit:contain;


    filter:
        grayscale(100%);


    opacity:.7;


    transition:.25s ease;

}



.medio-logo img:hover{

    filter:
        grayscale(0);


    opacity:1;


    transform:
        scale(1.05);

}



.medios-logos:hover
.medios-logos-track{

    animation-play-state:paused;

}



@keyframes mediosScroll{


    from{

        transform:
            translateX(0);

    }


    to{

        transform:
            translateX(-50%);

    }


}



.medios-cabecera{

    max-width:760px;


    margin:auto;


    padding:
        0 25px;


    text-align:center;

}



.medios-cabecera h2{

    margin:
        0 0 14px;


    color:
        var(--psyfeel-blue);


    font-size:34px;

    line-height:1.2;

}



.medios-cabecera p{

    color:
        var(--psyfeel-text);


    font-size:16px;

    line-height:1.7;

}





/* =========================================================
   FAQ
========================================================= */


.preguntas-frecuentes{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );


    margin:
        0 auto 95px;

}



.preguntas-frecuentes .titulo{

    max-width:760px;


    margin:
        0 auto 36px;


    text-align:center;

}



.preguntas-frecuentes .titulo h2{

    margin:
        0 0 13px;


    color:
        var(--psyfeel-blue);


    font-size:36px;

    line-height:1.2;

}



.preguntas-frecuentes .titulo p{

    color:
        var(--psyfeel-text);


    font-size:16px;

    line-height:1.7;

}



.preguntas-filas{

    max-width:900px;


    margin:auto;

}



.preguntas-filas details{

    margin-bottom:10px;


    background:#fff;


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


    border-radius:14px;

}



.preguntas-filas summary{

    position:relative;


    padding:
        19px 52px 19px 20px;


    color:
        var(--psyfeel-blue);


    font-size:15px;


    font-weight:700;


    cursor:pointer;


    list-style:none;

}



.preguntas-filas summary::-webkit-details-marker{

    display:none;

}



.preguntas-filas summary::after{

    content:"+";


    position:absolute;


    right:20px;

    top:50%;


    transform:
        translateY(-50%);


    color:
        var(--psyfeel-action);


    font-size:22px;

}



.preguntas-filas details[open]
summary::after{

    content:"−";

}



.preguntas-filas details p{

    padding:
        0 20px 20px;


    color:
        var(--psyfeel-muted);


    font-size:14.5px;

    line-height:1.7;

}





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


footer{

    padding:
        55px 6% 30px;


    background:#101f50;


    color:#fff;

}



.menu-footer{

    width:
        min(
            1100px,
            100%
        );


    margin:auto;


    display:grid;


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


    gap:45px;

}



.menu-footer > div{

    display:flex;


    flex-direction:column;


    gap:10px;

}



.titlefoot{

    margin-bottom:5px;


    font-size:15px;


    font-weight:750;

}



.menu-footer a{

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


    text-decoration:none;


    font-size:13px;

}



.menu-footer a:hover{

    color:#fff;

}



.footer-text{

    width:
        min(
            1100px,
            100%
        );


    margin:
        40px auto 0;


    padding-top:20px;


    border-top:
        1px solid
        rgba(255,255,255,.15);


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


    font-size:12px;

}





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


.acciones-movil{

    display:none;

}



.whatsapp{

    position:fixed;


    left:18px;

    bottom:18px;


    z-index:1000000;


    width:54px;

    height:54px;


    display:flex;


    align-items:center;

    justify-content:center;


    padding:0;


    color:#fff;


    background:#25D366;


    border:0;


    border-radius:50%;


    cursor:pointer;


    box-shadow:
        0 8px 22px
        rgba(37,211,102,.28);

}



.whatsapp svg{

    width:25px;

    height:25px;


    fill:currentColor;

}





.whatsappdiv,
.llamadadiv{

    position:fixed;


    left:20px;

    bottom:80px;


    z-index:1000001;


    width:340px;


    max-height:520px;


    overflow-y:auto;


    padding:0;


    background:#fff;


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


    border-radius:18px;


    box-shadow:
        0 16px 40px
        rgba(19,50,134,.16);


    display:none;

}



.whatsappdiv.abierto,
.llamadadiv.abierto{

    display:block;

}



.whatsappdiv .titulo,
.llamadadiv .titulo{

    padding:
        16px 18px 14px;


    border-bottom:
        1px solid
        var(--psyfeel-border);

}



.titulo-superior{

    display:flex;


    align-items:center;

    justify-content:space-between;


    gap:12px;

}



.whatsappdiv .titulo p,
.llamadadiv .titulo p{

    margin:0;


    color:
        var(--psyfeel-blue);


    font-size:16px;


    font-weight:700;

}



.whatsappdiv .titulo span,
.llamadadiv .titulo span{

    display:block;


    margin-top:4px;


    color:
        var(--psyfeel-muted);


    font-size:12.5px;

}



.cerrar-desplegable{

    width:30px;

    height:30px;


    flex:
        0 0 30px;


    display:flex;


    align-items:center;

    justify-content:center;


    padding:0;


    color:
        var(--psyfeel-blue);


    background:
        var(--psyfeel-soft);


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


    border-radius:50%;


    font-size:20px;


    line-height:1;


    cursor:pointer;

}



.botonesdiv{

    display:flex;


    flex-direction:column;


    gap:4px;


    padding:10px;

}



.enlacewhat,
.enlacellamada{

    width:100%;


    display:flex;


    align-items:center;


    gap:12px;


    padding:10px;


    background:#fff;


    border-radius:12px;


    text-decoration:none;


    transition:.2s ease;

}



.enlacewhat:hover,
.enlacellamada:hover{

    background:
        var(--psyfeel-soft);


    transform:
        translateX(2px);

}



.enlacewhat img,
.enlacellamada img{

    width:58px;

    height:58px;


    min-width:58px;


    flex:
        0 0 58px;


    object-fit:cover;


    object-position:
        center top;


    border:
        2px solid #eef1f6;


    border-radius:50%;

}



.enlacewhat-texto,
.enlacellamada-texto{

    display:flex;


    flex-direction:column;


    min-width:0;

}



.enlacewhat-texto strong,
.enlacellamada-texto strong{

    color:
        var(--psyfeel-blue);


    font-size:14px;


    font-weight:700;

}



.enlacewhat-texto span,
.enlacellamada-texto span{

    margin-top:3px;


    color:
        var(--psyfeel-muted);


    font-size:12.5px;

}





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


@media(max-width:980px){


    .btn-menu{

        display:block;

    }


    .list-container{

        display:none;

    }


    .img-header{

        grid-template-columns:1fr;


        gap:30px;


        padding:
            45px 7%;

    }


    .imagen-header{

        order:-1;

    }


    .imagen-header img{

        max-width:720px;


        margin:auto;

    }


    .img-header .centrado{

        max-width:760px;

    }


    .psicologos{

        grid-template-columns:1fr;


        max-width:650px;

    }


    .psicologo > img{

        height:auto;


        max-height:430px;

    }


    .listado-proceso{

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

    }


    .especialidades-listado{

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

    }


    .bannerconfianza .centro{

        grid-template-columns:1fr;

    }


    .bannerconfianza .imgs{

        text-align:left;

    }


    .ubicaciones-grid{

        grid-template-columns:1fr;

    }


    .menu-footer{

        grid-template-columns:
            1fr 1fr;

    }


}





/* =========================================================
   MÓVIL
========================================================= */


@media(max-width:650px){


    body{

        padding-bottom:82px;

    }



    .menu{

        height:94px;


        padding:
            0 18px;

    }



    .logo-box img{

        width:130px;

    }



    .menudesplegable{

        top:94px;


        height:
            calc(
                100vh - 94px
            );

    }



    .img-header{

        display:flex;


        flex-direction:column;


        min-height:0;


        margin-top:94px;


        padding:
            24px 18px 34px;


        gap:20px;


        border-radius:
            0 0 26px 26px;

    }



    .img-header .imagen-header{

        order:1;


        margin-bottom:4px;

    }



    .img-header .welcome{

        order:2;

    }



    .img-header .welcome h1{

        font-size:16px;

    }



    .img-header .welcome h2{

        font-size:30px;

    }



    .img-header .welcome p{

        font-size:15px;

    }



    .imagen-header img{

        border-radius:18px;

    }



    .psyfeel-mini-authority{

        width:
            calc(
                100% - 28px
            );


        margin:
            18px auto 60px;


        padding:
            14px 16px;


        align-items:flex-start;


        flex-direction:column;

    }



    .psyfeel-mini-authority span{

        width:100%;

    }



    #beneficios{

        padding-bottom:65px;

    }



    #beneficios .titulo h2,
    .especialidades-texto h2,
    .ubicaciones-cabecera h2,
    .reviews-cabecera h2,
    .preguntas-frecuentes .titulo h2{

        font-size:29px;

    }



    .psicologos{

        width:
            calc(
                100% - 28px
            );


        gap:20px;

    }



    .psicologo-body{

        padding:20px;

    }



    .psicologo h3{

        font-size:23px;

    }



    .precios-card{

        grid-template-columns:1fr;

    }



    .precios-card > div{

        display:flex;


        align-items:center;


        justify-content:space-between;


        text-align:left;

    }



    .precios-card span{

        min-height:0;


        justify-content:flex-start;

    }



    .precios-card strong{

        margin:
            0 0 0 12px;

    }



    .comoes{

        width:
            calc(
                100% - 28px
            );


        margin-bottom:60px;


        padding:
            34px 22px;

    }



    .comoes h2,
    .proceso-terapia h2,
    .confianza-psyfeel h2,
    .medios-cabecera h2{

        font-size:28px;

    }



    .proceso-terapia,
    .especialidades,
    .bannerconfianza,
    .confianza-psyfeel,
    .ubicaciones-salamanca,
    .reviews,
    .medios-psyfeel,
    .preguntas-frecuentes{

        width:
            calc(
                100% - 28px
            );

    }



    .listado-proceso{

        grid-template-columns:1fr;

    }



    .listado-proceso li{

        min-height:0;

    }



    .especialidades-listado{

        grid-template-columns:1fr;

    }



    .bannerconfianza{

        padding:
            34px 22px;

    }



    .bannerconfianza h2{

        font-size:27px;

    }



    .bannerconfianza .imgs{

        text-align:center;

    }



    .ubicaciones-mapa,
    .ubicaciones-mapa iframe{

        min-height:330px;

    }



    .medio-logo{

        width:150px;

        height:60px;

    }



    .medio-logo img{

        max-height:48px;

    }



    .medios-logos-track{

        gap:38px;


        animation-duration:22s;

    }



    .medios-logos::before,
    .medios-logos::after{

        width:35px;

    }



    .menu-footer{

        grid-template-columns:1fr;

    }



    /* BARRA MÓVIL */


    .acciones-movil{

        position:fixed;


        left:10px;

        right:10px;

        bottom:10px;


        z-index:1000002;


        display:grid;


        grid-template-columns:
            1fr 1fr;


        background:#fff;


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


        border-radius:16px;


        box-shadow:
            0 10px 30px
            rgba(19,50,134,.18);


        overflow:hidden;

    }



    .accion-movil{

        min-height:58px;


        display:flex;


        flex-direction:column;


        align-items:center;

        justify-content:center;


        gap:4px;


        padding:
            7px 4px;


        background:#fff;


        color:
            var(--psyfeel-blue);


        border:0;


        border-right:
            1px solid
            var(--psyfeel-border);


        font-size:11px;


        font-weight:700;


        cursor:pointer;

    }



    .accion-movil:last-child{

        border-right:0;

    }



    .accion-movil svg{

        width:20px;

        height:20px;


        fill:currentColor;

    }



    .accion-whatsapp{

        color:#1fae55;

    }



    .accion-llamar{

        color:
            var(--psyfeel-blue);

    }



    .whatsapp{

        display:none !important;

    }



    .whatsappdiv,
    .llamadadiv{

        left:12px;

        right:12px;


        bottom:78px;


        width:auto;


        max-height:70vh;

    }


}





@media(max-width:380px){


    .img-header .welcome h2{

        font-size:27px;

    }



    .psicologo-acciones{

        grid-template-columns:1fr;

    }


}



























/* =========================================================
   CONTACTO HERO OVIEDO
========================================================= */

.img-header .interte{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
}


.img-header .reservawhatarriba,
.img-header .btnllamada{

    width:auto;
    min-width:180px;
    height:auto;

    margin:0;

    padding:12px 18px;

    border:none;
    border-radius:12px;

    font-family:sans-serif;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}


.img-header .reservawhatarriba{

    background:#2F80ED;
    color:#fff;

    box-shadow:
        0 8px 22px
        rgba(47,128,237,.22);
}


.img-header .reservawhatarriba:hover{

    background:#1f69d5;

    transform:translateY(-2px);
}


.img-header .btnllamada{

    background:#fff;
    color:#133286;

    border:1px solid #dfe5ef;

    box-shadow:none;
}


.img-header .btnllamada:hover{

    background:#f7f9ff;

    transform:translateY(-2px);
}



/* =========================================================
   FONDO MODAL
========================================================= */

.fondo-whatsapparribadiv{

    position:fixed;

    inset:0;

    z-index:1000000;

    display:none;

    background:
        rgba(18,28,55,.35);

    backdrop-filter:
        blur(2px);
}



/* =========================================================
   PANELES
========================================================= */

.whatsapparribadiv,
.llamadasdiv{

    position:fixed;

    top:50%;
    left:50%;

    z-index:1000001;

    width:
        min(
            390px,
            calc(100% - 28px)
        );

    max-height:80vh;

    overflow-y:auto;

    padding:0;

    background:#fff;

    border:
        1px solid #e7eaf0;

    border-radius:20px;

    box-shadow:
        0 22px 60px
        rgba(19,50,134,.23);

    transform:
        translate(-50%,-50%);

    display:none;
}



/* =========================================================
   CABECERA
========================================================= */

.titulo-panel-contacto{

    display:flex;

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

    gap:15px;

    padding:
        18px 18px 8px;
}


.titulo-panel-contacto p{

    margin:0;

    color:#133286;

    font-family:sans-serif;

    font-size:17px;
    font-weight:700;
}


.titulo-panel-contacto button{

    width:31px;
    height:31px;

    display:flex;

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

    flex:0 0 31px;

    padding:0;

    background:#f7f9ff;

    color:#133286;

    border:
        1px solid #e7eaf0;

    border-radius:50%;

    font-size:20px;

    line-height:1;

    cursor:pointer;
}


.subtitulo-panel-contacto{

    display:block;

    padding:
        0 18px 14px;

    color:#667085;

    font-family:sans-serif;

    font-size:12.5px;

    border-bottom:
        1px solid #e7eaf0;
}



/* =========================================================
   LISTADO PSICÓLOGAS
========================================================= */

.contacto-profesionales{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:10px;
}


.contacto-profesional{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:11px;

    background:#fff;

    border-radius:13px;

    text-decoration:none;

    transition:.2s ease;
}


.contacto-profesional:hover{

    background:#f7f9ff;

    transform:translateX(2px);
}


.contacto-profesional img{

    width:62px;
    height:62px;

    flex:
        0 0 62px;

    object-fit:cover;

    object-position:
        center top;

    border-radius:50%;

    border:
        2px solid #eef1f6;
}


.contacto-profesional > div{

    display:flex;

    flex-direction:column;

    text-align:left;
}


.contacto-profesional strong{

    color:#133286;

    font-family:sans-serif;

    font-size:14px;

    font-weight:700;
}


.contacto-profesional span{

    margin-top:4px;

    color:#667085;

    font-family:sans-serif;

    font-size:12.5px;
}






/* =========================================================
   BOTONES DE CADA PSICÓLOGA
========================================================= */

.acciones-psicologa{

    width:100%;

    display:grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap:8px;

    margin-top:18px;
}


.acciones-psicologa a{

    min-height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        9px 10px;

    border-radius:10px;

    text-decoration:none;

    text-align:center;

    font-family:sans-serif;

    font-size:12.5px;

    font-weight:700;

    transition:.2s ease;
}


.acciones-psicologa .sabermas{

    background:#fff;

    color:#133286;

    border:
        1px solid #dfe5ef;
}


.acciones-psicologa .sabermas:hover{

    background:#f7f9ff;
}


.acciones-psicologa .reservawhatarriba{

    background:#25D366;

    color:#fff;

    border:
        1px solid #25D366;
}


.acciones-psicologa .reservawhatarriba:hover{

    background:#20bd5a;
}


.acciones-psicologa .btnllamada{

    background:#2F80ED;

    color:#fff;

    border:
        1px solid #2F80ED;
}


.acciones-psicologa .btnllamada:hover{

    background:#1f69d5;
}


@media(max-width:600px){

    .acciones-psicologa{

        grid-template-columns:1fr;

    }

}



/* =========================================================
   PSYFEEL EN LOS MEDIOS
========================================================= */

.medios-psyfeel{

    width:
        min(
            1120px,
            calc(100% - 40px)
        );

    margin:
        70px auto 90px;

    padding:
        45px 0;

    overflow:hidden;

    background:#fff;

    border:
        1px solid #e7eaf0;

    border-radius:24px;

    box-shadow:
        0 10px 30px
        rgba(19,50,134,.06);
}



/* =========================================================
   LOGOS
========================================================= */

.medios-logos{

    position:relative;

    width:100%;

    overflow:hidden;

    margin-bottom:35px;

    padding:
        18px 0;
}


.medios-logos::before,
.medios-logos::after{

    content:"";

    position:absolute;

    top:0;

    width:80px;
    height:100%;

    z-index:2;

    pointer-events:none;
}


.medios-logos::before{

    left:0;

    background:
        linear-gradient(
            90deg,
            #fff,
            rgba(255,255,255,0)
        );
}


.medios-logos::after{

    right:0;

    background:
        linear-gradient(
            270deg,
            #fff,
            rgba(255,255,255,0)
        );
}


.medios-logos-track{

    width:max-content;

    display:flex;

    align-items:center;

    gap:58px;

    animation:
        carruselLogos
        30s
        linear
        infinite;
}


.medio-logo{

    width:210px;
    height:80px;

    flex:
        0 0 210px;

    display:flex;

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


.medio-logo img{

    display:block;

    max-width:100%;
    max-height:68px;

    width:auto;
    height:auto;

    object-fit:contain;

    filter:
        grayscale(100%);

    opacity:.7;

    transition:.25s ease;
}


.medio-logo:hover img{

    filter:
        grayscale(0);

    opacity:1;

    transform:
        scale(1.05);
}


.medios-logos:hover
.medios-logos-track{

    animation-play-state:paused;
}


@keyframes carruselLogos{

    from{

        transform:
            translateX(0);

    }

    to{

        transform:
            translateX(-50%);

    }

}



/* =========================================================
   CABECERA
========================================================= */

.medios-cabecera{

    max-width:800px;

    margin:
        0 auto 36px;

    padding:
        0 25px;

    text-align:center;
}


.medios-eyebrow{

    display:block;

    margin-bottom:9px;

    color:#ffb326;

    font-family:sans-serif;

    font-size:12px;

    font-weight:800;

    letter-spacing:.12em;
}


.medios-cabecera h2{

    margin:
        0 0 12px;

    color:#133286;

    font-family:sans-serif;

    font-size:34px;

    line-height:1.2;

    font-weight:700;
}


.medios-cabecera p{

    max-width:720px;

    margin:auto;

    color:#545454;

    font-family:sans-serif;

    font-size:16px;

    line-height:1.7;
}



/* =========================================================
   CARRUSEL
========================================================= */

.medios-carousel{

    position:relative;

    width:
        calc(100% - 80px);

    margin:auto;
}


.medios-viewport{

    width:100%;

    overflow:hidden;
}


.medios-track{

    display:flex;

    transition:
        transform .45s ease;
}


.medio-publicacion{

    flex:
        0 0 calc(33.333% - 14px);

    min-height:295px;

    margin-right:21px;

    padding:25px;

    display:flex;

    flex-direction:column;

    background:#f7f9ff;

    border:
        1px solid #e7eaf0;

    border-radius:18px;
}


.medio-nombre{

    margin-bottom:14px;

    color:#ff9f1c;

    font-family:sans-serif;

    font-size:11px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.medio-publicacion h3{

    margin:
        0 0 13px;

    color:#133286;

    font-family:sans-serif;

    font-size:18px;

    line-height:1.35;
}


.medio-publicacion p{

    margin:
        0 0 20px;

    color:#667085;

    font-family:sans-serif;

    font-size:14px;

    line-height:1.65;
}


.medio-enlace{

    margin-top:auto;

    color:#2F80ED;

    font-family:sans-serif;

    font-size:13.5px;

    font-weight:700;

    text-decoration:none;
}


.medio-enlace:hover{

    text-decoration:underline;
}



/* =========================================================
   FLECHAS
========================================================= */

.medios-flecha{

    position:absolute;

    top:50%;

    transform:
        translateY(-50%);

    z-index:3;

    width:42px;
    height:42px;

    display:flex;

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

    padding:0;

    background:#fff;

    color:#133286;

    border:
        1px solid #e7eaf0;

    border-radius:50%;

    box-shadow:
        0 7px 20px
        rgba(19,50,134,.12);

    font-size:29px;

    line-height:1;

    cursor:pointer;
}


.medios-prev{

    left:-22px;
}


.medios-next{

    right:-22px;
}



/* =========================================================
   INDICADORES
========================================================= */

.medios-indicadores{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:24px;
}


.medios-dot{

    width:8px;
    height:8px;

    padding:0;

    background:#d1d5db;

    border:0;

    border-radius:50%;

    cursor:pointer;

    transition:.2s ease;
}


.medios-dot.activo{

    width:22px;

    background:#2F80ED;

    border-radius:100px;
}



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

@media(max-width:950px){

    .medio-publicacion{

        flex:
            0 0 calc(50% - 11px);

    }

}


@media(max-width:650px){

    .medios-psyfeel{

        width:
            calc(100% - 28px);

        margin:
            50px auto 65px;

        padding:
            30px 0;

    }


    .medio-logo{

        width:150px;
        height:60px;

        flex-basis:150px;
    }


    .medio-logo img{

        max-height:48px;
    }


    .medios-logos-track{

        gap:38px;

        animation-duration:24s;
    }


    .medios-cabecera h2{

        font-size:28px;
    }


    .medios-cabecera p{

        font-size:15px;
    }


    .medios-carousel{

        width:
            calc(100% - 40px);

    }


    .medio-publicacion{

        flex:
            0 0 100%;

        margin-right:0;

        min-height:275px;

        padding:22px;
    }


    .medios-flecha{

        width:38px;
        height:38px;

        font-size:25px;
    }


    .medios-prev{

        left:-18px;
    }


    .medios-next{

        right:-18px;
    }

}
















































/* =========================================================
   PSYFEEL OVIEDO
   CONTACTO FLOTANTE NUEVO
   ========================================================= */



/* =========================================================
   BOTÓN WHATSAPP ESCRITORIO
   ========================================================= */

.whatsapp{
    position:fixed;

    left:18px;
    bottom:18px;

    width:54px;
    height:54px;

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

    padding:0;

    background:#25D366;
    color:#fff;

    border:none;
    border-radius:50%;

    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(37,211,102,.28);

    z-index:1000000;

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


.whatsapp:hover{
    background:#20bd5a;

    transform:translateY(-2px);

    box-shadow:
        0 11px 26px rgba(37,211,102,.34);
}


.whatsapp svg{
    width:25px;
    height:25px;

    fill:currentColor;
}



/* =========================================================
   CABECERAS DE LOS DESPLEGABLES
   ========================================================= */

.titulo-superior{
    display:flex;

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

    gap:12px;
}


.cerrar-desplegable{
    width:30px;
    height:30px;

    min-width:30px;

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

    padding:0;

    background:#f7f9ff;
    color:#133286;

    border:1px solid #e7eaf0;
    border-radius:50%;

    font-family:sans-serif;

    font-size:20px;
    line-height:1;

    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.cerrar-desplegable:hover{
    background:#eef4ff;

    border-color:#d7e2f2;

    transform:scale(1.05);
}



/* =========================================================
   WHATSAPP PANEL
   ========================================================= */

.whatsappdiv{
    position:fixed;

    left:20px;
    bottom:80px;

    width:340px;

    height:auto;
    max-height:520px;

    padding:0;

    background:#fff;

    border:1px solid #e7eaf0;
    border-radius:18px;

    box-shadow:
        0 16px 40px rgba(19,50,134,.16);

    overflow-y:auto;

    z-index:1000001;

    display:none;
}


.whatsappdiv.abierto{
    display:block;
}



/* CABECERA */

.whatsappdiv .titulo{
    width:100%;

    margin:0;

    padding:16px 18px 14px;

    border-bottom:1px solid #e7eaf0;

    text-align:left;
}


.whatsappdiv .titulo p{
    margin:0;
    padding:0;

    color:#133286;

    font-family:sans-serif;

    font-size:16px;
    line-height:1.3;

    font-weight:700;
}


.whatsappdiv .titulo span{
    display:block;

    margin-top:4px;

    color:#667085;

    font-family:sans-serif;

    font-size:12.5px;
    line-height:1.4;
}



/* CONTENEDOR */

.whatsappdiv .botonesdiv{
    width:100%;

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:10px;
}



/* PERSONA */

.whatsappdiv .enlacewhat{
    width:100%;
    height:auto;

    display:flex;

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

    gap:12px;

    margin:0;

    padding:10px;

    background:#fff;
    color:#133286;

    border:none;
    border-radius:12px;

    box-shadow:none;

    text-decoration:none;

    font-family:sans-serif;

    transition:
        background .2s ease,
        transform .2s ease;
}


.whatsappdiv .enlacewhat:hover{
    background:#f7f9ff;

    transform:translateX(2px);

    box-shadow:none;
}



/* FOTO */

.whatsappdiv .enlacewhat img{
    width:58px;
    height:58px;

    min-width:58px;
    flex:0 0 58px;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center top;

    border-radius:50%;

    border:2px solid #eef1f6;
}



/* TEXTO */

.whatsappdiv .enlacewhat-texto{
    display:flex;

    flex-direction:column;

    min-width:0;

    text-align:left;
}


.whatsappdiv .enlacewhat-texto strong{
    display:block;

    margin:0;

    color:#133286;

    font-size:14px;
    line-height:1.3;

    font-weight:700;
}


.whatsappdiv .enlacewhat-texto span{
    display:block;

    margin-top:3px;

    color:#667085;

    font-size:12.5px;
    line-height:1.3;
}



/* =========================================================
   LLAMADAS PANEL
   ========================================================= */

.llamadadiv{
    position:fixed;

    left:20px;
    bottom:80px;

    width:340px;

    height:auto;
    max-height:520px;

    padding:0;

    background:#fff;

    border:1px solid #e7eaf0;
    border-radius:18px;

    box-shadow:
        0 16px 40px rgba(19,50,134,.16);

    overflow-y:auto;

    z-index:1000001;

    display:none;
}


.llamadadiv.abierto{
    display:block;
}



/* CABECERA */

.llamadadiv .titulo{
    width:100%;

    margin:0;

    padding:16px 18px 14px;

    border-bottom:1px solid #e7eaf0;

    text-align:left;
}


.llamadadiv .titulo p{
    margin:0;
    padding:0;

    color:#133286;

    font-family:sans-serif;

    font-size:16px;
    line-height:1.3;

    font-weight:700;
}


.llamadadiv .titulo span{
    display:block;

    margin-top:4px;

    color:#667085;

    font-family:sans-serif;

    font-size:12.5px;
    line-height:1.4;
}



/* CONTENEDOR */

.llamadadiv .botonesdiv{
    width:100%;

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:10px;
}



/* PERSONA */

.enlacellamada{
    width:100%;

    display:flex;

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

    gap:12px;

    margin:0;

    padding:10px;

    background:#fff;
    color:#133286;

    border-radius:12px;

    text-decoration:none;

    font-family:sans-serif;

    transition:
        background .2s ease,
        transform .2s ease;
}


.enlacellamada:hover{
    background:#f7f9ff;

    transform:translateX(2px);
}



/* FOTO */

.enlacellamada img{
    width:58px;
    height:58px;

    min-width:58px;
    flex:0 0 58px;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center top;

    border-radius:50%;

    border:2px solid #eef1f6;
}



/* TEXTO */

.enlacellamada-texto{
    display:flex;

    flex-direction:column;

    min-width:0;

    text-align:left;
}


.enlacellamada-texto strong{
    display:block;

    margin:0;

    color:#133286;

    font-size:14px;
    line-height:1.3;

    font-weight:700;
}


.enlacellamada-texto span{
    display:block;

    margin-top:3px;

    color:#667085;

    font-size:12.5px;
    line-height:1.3;
}



/* =========================================================
   BARRA MÓVIL
   ========================================================= */

.acciones-movil{
    display:none;
}



@media(max-width:650px){

    /*
       Dejamos espacio inferior para que
       la barra no tape el contenido
    */

    body{
        padding-bottom:82px;
    }


    .acciones-movil{
        position:fixed;

        left:10px;
        right:10px;
        bottom:10px;

        z-index:1000002;

        display:grid;

        grid-template-columns:
            1fr
            1fr;

        background:#fff;

        border:1px solid #e7eaf0;
        border-radius:16px;

        box-shadow:
            0 10px 30px rgba(19,50,134,.18);

        overflow:hidden;
    }



    /* BOTONES */

    .accion-movil{
        min-height:60px;

        display:flex;

        flex-direction:column;

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

        gap:4px;

        padding:7px 4px;

        background:#fff;

        color:#133286;

        border:none;

        border-right:
            1px solid #e7eaf0;

        font-family:sans-serif;

        font-size:11px;
        font-weight:700;

        text-decoration:none;

        cursor:pointer;
    }


    .accion-movil:last-child{
        border-right:none;
    }


    .accion-movil svg{
        width:21px;
        height:21px;

        fill:currentColor;
    }



    /* WHATSAPP */

    .accion-whatsapp{
        color:#1fae55;
    }



    /* LLAMAR */

    .accion-llamar{
        color:#133286;
    }



    /*
       En móvil ocultamos el botón
       flotante circular de escritorio
    */

    .whatsapp{
        display:none !important;
    }



    /* =====================================================
       DESPLEGABLES EN MÓVIL
       ===================================================== */

    .whatsappdiv,
    .llamadadiv{
        left:12px;
        right:12px;

        bottom:82px;

        width:auto;

        max-height:70vh;

        border-radius:18px;
    }



    /* fotos algo mayores */

    .whatsappdiv .enlacewhat img,
    .enlacellamada img{
        width:60px;
        height:60px;

        min-width:60px;
        flex-basis:60px;
    }


    .whatsappdiv .enlacewhat,
    .enlacellamada{
        padding:10px;
    }

}



/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media(max-width:380px){

    .acciones-movil{
        left:7px;
        right:7px;
        bottom:7px;
    }


    .accion-movil{
        min-height:56px;

        font-size:10.5px;
    }


    .accion-movil svg{
        width:19px;
        height:19px;
    }


    .whatsappdiv,
    .llamadadiv{
        left:8px;
        right:8px;

        bottom:72px;
    }


    .whatsappdiv .enlacewhat img,
    .enlacellamada img{
        width:54px;
        height:54px;

        min-width:54px;
        flex-basis:54px;
    }

}







































/* =========================================================
   MODALES HERO OVIEDO
========================================================= */


/* FONDO */

.fondo-whatsapparribadiv{
    display:none;

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    background:rgba(20,30,55,.42);

    backdrop-filter:blur(3px);

    z-index:1000000;
}


.fondo-whatsapparribadiv.abierto{
    display:block;
}



/* =========================================================
   PANEL WHATSAPP + LLAMADAS
========================================================= */

.whatsapparribadiv,
.llamadasdiv{

    display:none;

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:min(410px,calc(100% - 30px));

    height:auto;

    max-height:80vh;

    overflow-y:auto;

    padding:0;

    background:#fff;

    border:1px solid #e7eaf0;

    border-radius:20px;

    box-shadow:
        0 22px 60px
        rgba(19,50,134,.25);

    z-index:1000001;

    text-align:left;
}


/* CLASE QUE AÑADE TU JS */

.whatsapparribadiv.abierto,
.llamadasdiv.abierto{
    display:block;
}



/* =========================================================
   CABECERA
========================================================= */

.titulo-panel-contacto{

    display:flex;

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

    gap:15px;

    padding:18px 18px 8px;
}


.titulo-panel-contacto p{

    margin:0;

    color:#133286;

    font-family:sans-serif;

    font-size:17px;

    font-weight:700;
}


.titulo-panel-contacto button{

    width:32px;
    height:32px;

    min-width:32px;

    display:flex;

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

    padding:0;

    margin:0;

    background:#f7f9ff;

    color:#133286;

    border:1px solid #e7eaf0;

    border-radius:50%;

    font-size:20px;

    line-height:1;

    cursor:pointer;
}


.subtitulo-panel-contacto{

    display:block;

    padding:0 18px 15px;

    color:#667085;

    font-family:sans-serif;

    font-size:13px;

    border-bottom:1px solid #e7eaf0;
}



/* =========================================================
   PSICÓLOGAS
========================================================= */

.contacto-profesionales{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:10px;
}


.contacto-profesional{

    width:100%;

    display:flex;

    align-items:center;

    gap:13px;

    padding:11px;

    background:#fff;

    border-radius:13px;

    text-decoration:none;

    transition:
        background .2s ease,
        transform .2s ease;
}


.contacto-profesional:hover{

    background:#f7f9ff;

    transform:translateX(2px);
}


.contacto-profesional img{

    width:60px;
    height:60px;

    min-width:60px;

    object-fit:cover;

    object-position:center top;

    border-radius:50%;

    border:2px solid #eef1f6;
}


.contacto-profesional > div{

    display:flex;

    flex-direction:column;

    min-width:0;
}


.contacto-profesional strong{

    color:#133286;

    font-family:sans-serif;

    font-size:14px;

    font-weight:700;
}


.contacto-profesional span{

    margin-top:4px;

    color:#667085;

    font-family:sans-serif;

    font-size:12.5px;
}



/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:600px){

    .whatsapparribadiv,
    .llamadasdiv{

        width:calc(100% - 24px);

        max-height:85vh;

        border-radius:17px;

    }

}



















.whatsapparribadiv,
.llamadasdiv,
.fondo-whatsapparribadiv{
    display:none;
}


.whatsapparribadiv.abierto,
.llamadasdiv.abierto{
    display:block !important;
}

.fondo-whatsapparribadiv.abierto{
    display:block;
}




/* =========================================================
   ARREGLO PANELES HERO OVIEDO
========================================================= */

.whatsapparribadiv.abierto{
    display:block !important;
}

.llamadasdiv.abierto{
    display:block !important;
}

.fondo-whatsapparribadiv.abierto{
    display:block !important;
}