/* ==========================================================================
   ajustes.css  —  Correcciones de escala y proporción de la landing page
   Se carga DESPUÉS de style.css y site.css, por lo que sus reglas ganan.
   No modifica los archivos del theme original ni el SCSS.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CABECERA / LOGO
   El theme limita .logo a 43px de alto y site.css le mete height:100px con
   margin-top:-30px al <img>, así que el logo se sale de su caja y queda
   descuadrado respecto al menú. Aquí se le da una altura coherente y se
   centra verticalmente con la navegación.
   -------------------------------------------------------------------------- */
.tt-header .logo {
    max-width: none;
    max-height: none;
    line-height: 0;
}

.tt-header .logo img,
header .logo img {
    width: auto;
    max-width: 100%;
    height: 60px;
    margin-top: 0;
    display: block;
}

header {
    border-top-width: 3px;
}

/* --- Franja del logo + menú -------------------------------------------------
   El theme la montaba a base de floats, así que el logo y el menú se
   apoyaban arriba y quedaba un hueco muerto debajo. Ahora la franja tiene
   una altura definida y su contenido se centra verticalmente en ella. */
@media (min-width: 992px) {
    .header_bottom {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .header_bottom .responsiveSrollWrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        min-height: 88px;
        -webkit-transition: min-height 250ms ease;
        transition: min-height 250ms ease;
    }

    .tt-header .top-inner,
    .header_bottom .responsiveWrapper {
        float: none !important;
        padding: 0 !important;
        margin: 0;
    }

    /* El fondo de la franja pasa de <nav> a .header_bottom, para que cubra
       toda la altura y no sólo el alto del menú. */
    .header3 nav {
        padding: 0;
        background: transparent;
        float: none;
    }

    .header3 nav:before,
    .header3 nav:after {
        display: none;
    }

    .page-interna .header_bottom {
        background: #fff;
    }

    /* Hueco reservado bajo el header en páginas internas: 146px venía del
       header viejo (con la barra de teléfono flotante encima). La franja
       real ahora mide ~128px (top-line3 + header_bottom). */
    .page-interna .headerfix3 {
        height: 128px !important;
    }
}

/* Barra superior de contacto: 18px era demasiado para una tira de 34px */
.top-line3 {
    padding-top: 7px;
}

.top-line3 p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 0;
}

.top-line3 .fa,
.top-line3 .fa-phone {
    font-size: 15px;
    padding-right: 8px;
}

.top-line3 .social_icon ul li {
    padding-top: 1px;
    padding-bottom: 7px;
    padding-right: 14px;
}

.top-line3 .social_icon ul li i {
    font-size: 16px;
}


/* --------------------------------------------------------------------------
   2. BANNER PRINCIPAL (swiper)
   690px fijos ocupaban más que la ventana en portátiles. Pasa a alto
   relativo con topes, y el bloque de texto se centra en vertical.
   -------------------------------------------------------------------------- */
.homeindex3 .mainBanner .cell-view,
.mainBanner .cell-view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: auto;
    height: auto;
    min-height: 68vh;
    max-height: 620px;
    padding: 40px 0;
}

@media (min-width: 992px) {
    .homeindex3 .mainBanner .cell-view,
    .mainBanner .cell-view {
        min-height: 560px;
    }
}

.homeindex3 .rightone {
    float: none;
    width: 52%;
    max-width: 620px;
}

/* Caja del título: antes todo el bloque llevaba opacity .6, lo que dejaba
   el texto lavado. Ahora la transparencia va sólo en el fondo. */
.bannerTitle {
    float: none;
    margin-bottom: 25px;
}

.bannerTitle .h1,
.bannerTitle .h2,
.bannerTitle h1,
.bannerTitle h2 {
    opacity: 1;
    background-color: rgba(116, 46, 148, 0.78);
    border-radius: 18px;
    padding: 26px 30px;
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bannerTitle p {
    font-size: 30px;
    line-height: 40px;
}

.homeindex3 .bannerBtnWrapper {
    float: none;
    text-align: left;
    margin-top: 22px;
}

.homeindex3 .bannerBtnWrapper .button {
    margin: 0 12px 10px 0;
}

/* Flechas del slider proporcionadas al nuevo alto */
.mainSwiperbanner .swiper-button-prev,
.mainSwiperbanner .swiper-button-next {
    width: 42px;
    height: 42px;
    background-size: 12px auto;
}

@media (min-width: 768px) and (max-width: 991px) {
    .homeindex3 .rightone {
        width: 70%;
    }

    .bannerTitle .h1,
    .bannerTitle .h2,
    .bannerTitle p {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 767px) {
    .homeindex3 .mainBanner .cell-view,
    .mainBanner .cell-view {
        display: block;
        min-height: 340px;
        max-height: none;
        padding: 30px 0;
    }

    .homeindex3 .rightone {
        width: 100%;
        max-width: none;
    }

    .bannerTitle .h1,
    .bannerTitle .h2,
    .bannerTitle p,
    .homepage5 .bannerTitle h2 {
        font-size: 19px;
        line-height: 27px;
        padding: 16px 18px;
        border-radius: 14px;
    }
}


/* --------------------------------------------------------------------------
   3. TIRA DE CONTACTO (strip5)
   Los iconos venían a 45/50/40px, con lo que las tres columnas no alineaban.
   -------------------------------------------------------------------------- */
.strip5 {
    padding: 28px 15px;
}

.strip5 .single-content {
    position: relative;
    min-height: 56px;
    display: table;
    width: 100%;
}

.strip5 .icon {
    width: 60px;
    text-align: center;
    padding-top: 0;
}

.strip5 .flaticon1-smartphone-call:before,
.strip5 .flaticon1-envelope:before,
.strip5 .flaticon2-placeholder:before {
    font-size: 38px;
    margin-right: 0;
    line-height: 1;
}

.strip5 h4 {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: .4px;
    margin-bottom: 4px;
}

.strip5 p,
.strip5 .font-24 {
    font-size: 17px !important;
    line-height: 24px;
    margin-bottom: 0;
    word-break: break-word;
}

.strip5 .line {
    right: 20px;
    top: 50%;
    height: 46px;
    margin-top: -23px;
}

@media (max-width: 991px) {
    .strip5 .single-content {
        margin-bottom: 18px;
    }

    .strip5 .line {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   4. RITMO VERTICAL DE LAS SECCIONES
   101px arriba y abajo en cada bloque hacía la página interminable.
   -------------------------------------------------------------------------- */
.contentPadding {
    padding: 70px 0;
}

.contentPadding.no-bottom {
    padding-bottom: 0;
}

@media (max-width: 991px) {
    .contentPadding {
        padding: 50px 0;
    }
}

@media (max-width: 767px) {
    .contentPadding {
        padding: 35px 0;
    }
}


/* --------------------------------------------------------------------------
   5. TIPOGRAFÍA DE TÍTULOS
   Las secciones usan h1/h2/h3/h5 indistintamente (48/32/28/22px), así que
   títulos del mismo nivel se veían de tamaños muy distintos. Se unifican.
   -------------------------------------------------------------------------- */
.welcome_consulting .contentTitle .as,
.services5 .contentTitle .as,
.homeabout5 .titleShortocode .as,
.need_consultation .contentTitle .as,
.treatment5 .titleShortocode .as,
.requestForm .contentTitle .as {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 20px;
}

.font-38 {
    font-size: 32px;
    line-height: 40px;
}

.font-28 {
    font-size: 28px !important;
    line-height: 36px;
}

.welcome_consulting h2 {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 15px;
}

.our_clinic .block .as a,
.tumbWrapper .as a {
    font-size: 17px;
    line-height: 24px;
}

@media (max-width: 991px) {
    .welcome_consulting .contentTitle .as,
    .services5 .contentTitle .as,
    .homeabout5 .titleShortocode .as,
    .need_consultation .contentTitle .as,
    .treatment5 .titleShortocode .as,
    .requestForm .contentTitle .as,
    .font-38 {
        font-size: 26px;
        line-height: 34px;
    }

    .font-28 {
        font-size: 22px !important;
        line-height: 30px;
    }
}


/* --------------------------------------------------------------------------
   6. BLOQUE "SOBRE MÍ"
   -------------------------------------------------------------------------- */
.welcome_consulting .img-responsive {
    border-radius: 4px;
}

.welcome_consulting .col-md-5 > img {
    width: 100%;
    max-width: 420px;
}

.welcome_consulting h4 {
    font-size: 18px;
    line-height: 26px;
    margin-top: 25px;
}

.welcome_consulting h4 em {
    font-size: 14px;
    line-height: 22px;
    display: inline-block;
    font-weight: 400;
    text-transform: none;
}

/* La firma venía a tamaño original y competía con el texto */
.welcome_consulting img[alt="firma psicologa"] {
    max-width: 190px;
    height: auto;
    margin-top: 5px;
}

@media (max-width: 991px) {
    .welcome_consulting .col-md-5 > img {
        margin: 0 auto 30px;
    }
}


/* --------------------------------------------------------------------------
   7. BLOQUE "ACERCA / PREGUNTAS"
   -------------------------------------------------------------------------- */
.homeabout5 .aboutUs .imgWrapper img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 3px;
}

.homeabout5 .aboutUs .imgWrapper {
    margin-bottom: 20px;
}

.homeabout5 .emptySpace40 {
    height: 0;
}

.homeabout5 .simple-article ul {
    margin: 0;
    padding-left: 18px;
}

.homeabout5 .simple-article ul li {
    line-height: 28px;
}


/* --------------------------------------------------------------------------
   8. TARJETAS DE TERAPIAS
   Los textos de distinta longitud dejaban las 4 tarjetas descuadradas.
   -------------------------------------------------------------------------- */
.services5 .tumbWrapper {
    max-width: 270px;
    margin: 0 auto 30px;
}

.services5 .tumbWrapper .imgWrapper img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.services5 .tumbWrapper .imgWrapper {
    margin-bottom: 18px;
}

.services5 .tumbWrapper .as a {
    min-height: 48px;
}

.services5 .tumbContent {
    font-size: 14px;
    line-height: 24px;
}

@media (min-width: 992px) {
    .services5 .tumbContent {
        min-height: 120px;
    }
}

.services5 .contentTitle p {
    max-width: 900px;
    margin: 0 auto;
}


/* --------------------------------------------------------------------------
   9. BLOQUE "¿REQUIERE AYUDA?" y "NUESTRA CLÍNICA"
   -------------------------------------------------------------------------- */
.need_consultation .rightside ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.need_consultation .rightside ul li {
    font-size: 18px;
    line-height: 30px;
}

.our_clinic {
    margin-top: 0;
}

.our_clinic .cell-view {
    display: block;
    width: auto;
    padding: 8px;
    height: 100%;
}

.our_clinic .block {
    min-height: 118px;
}

.our_clinic .block .imgWrapper i {
    font-size: 36px;
    line-height: 1;
}

.our_clinic .block .blockContent {
    padding-left: 62px;
}

.our_clinic .block p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 22px;
}

@media (max-width: 991px) {
    .our_clinic .col-md-4 {
        margin-bottom: 15px;
    }
}


/* --------------------------------------------------------------------------
   10. FORMULARIO DE INFORMACIÓN
   -------------------------------------------------------------------------- */
.requestForm .simple-input {
    width: 100%;
    height: 46px;
    padding: 10px 16px;
}

.requestForm textarea.simple-input {
    height: 110px;
    resize: vertical;
}

.requestForm .btnWrapper {
    text-align: left;
}


/* --------------------------------------------------------------------------
   11. BANNER FINAL "TRATAMIENTOS PSICOLÓGICOS"
   -------------------------------------------------------------------------- */
.treatment5 .cell-view {
    display: block;
    width: auto;
    padding: 0;
}

.treatment5 .titleShortocode.big .as {
    margin-bottom: 18px;
}

.treatment5 .simple-article p {
    max-width: 780px;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   11b. PÁGINA "SUCURSALES" — SOLO MAPA
   La página traía dos columnas: el nombre de la sucursal + la dirección en
   texto (duplicando lo que ya dice el propio mapa), y un iframe con
   width="100%" pero height="400" fijo en el atributo HTML. Ahora es un único
   bloque a ancho completo, con altura responsive y el iframe forzado a
   cubrirlo entero (el atributo height="400" del embed queda sin efecto).
   -------------------------------------------------------------------------- */
.mapWrapper {
    position: relative;
    width: 100%;
    height: 480px;
}

.mapWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

@media (max-width: 767px) {
    .mapWrapper {
        height: 320px;
    }
}


/* --------------------------------------------------------------------------
   12. BOTONES
   Los del banner eran diminutos (14px, padding 7px) y en lila claro sobre
   fotos claras: no se leían ni parecían botones. Ahora tienen peso, jerarquía
   (uno principal, uno de WhatsApp) y sombra para despegar de la imagen.
   -------------------------------------------------------------------------- */
.button.btnSize2 {
    padding: 14px 32px;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: .5px;
}

.bannerBtnWrapper .button {
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* Principal: morado corporativo, no el lila claro del theme */
.bannerBtnWrapper .button:first-child {
    background: #742e94;
}

/* Secundario: verde WhatsApp, coherente con lo que hace el botón */
.bannerBtnWrapper .button:nth-child(2) {
    background: #25a366;
}

.bannerBtnWrapper .button:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
}

/* Ninguna imagen debe desbordar su columna */
img {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   13. MENÚ DE NAVEGACIÓN
   El theme separaba los items con 45px de padding a cada lado (90px entre
   enlaces), lo que dejaba el menú disperso. "Terapias" ya no despliega
   submenú: es un enlace directo a la página de terapias.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    nav ul li a {
        padding: 5px 20px;
        font-size: 14px;
        letter-spacing: .8px;
    }

    nav > ul > li:last-child > a {
        padding-right: 0;
    }
}

/* Botón "Admin": site.css lo pintaba con el mismo morado sólido que usa el
   resto de la marca, más fuerte que el color del item activo del menú — así
   parecía la sección seleccionada en vez de un acceso secundario. Se atenúa
   a texto simple con ícono, sin relleno ni borde, para que quede claramente
   subordinado al resaltado real (texto #b07bb6) del item activo. */
.menu-acceso > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    background-color: transparent !important;
    color: #742e94 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 700;
    padding: 8px 6px !important;
    -webkit-transition: color 150ms linear;
    transition: color 150ms linear;
}

/* "nav ul li i.fa" (regla genérica del theme para la flechita de los
   desplegables) posiciona en absoluto cualquier ícono dentro del <li>,
   incluido este — lo sacaba del flujo y lo montaba sobre el texto. */
.menu-acceso > a i.fa {
    position: static;
    top: auto;
    right: auto;
    font-size: 12px;
}

.menu-acceso > a:hover {
    color: #5c2475 !important;
}


/* --------------------------------------------------------------------------
   14. HEADER FIJO + TRANSPARENTE  (todas las páginas, sólo escritorio)
   El theme deja el header en position:absolute y sólo lo pasa a fixed tras
   300px de scroll (deslizándolo desde -500px): resultado, el header
   desaparecía al subir en vez de quedarse fijo. Se aplica igual en portada
   e interiores para que el comportamiento sea idéntico en todo el sitio.
   El parallax/gradiente del hero (mitad final de esta sección) sigue
   exclusivo de la portada porque sólo ella tiene el swiper .mainBanner.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    /* Header fijo desde el primer píxel en todas las páginas; el efecto
       "compacto" se logra plegando la barra de contacto, sin que el header
       se mueva ni desaparezca. */
    header,
    header.header-scrolled,
    header.header-scrolled-animated {
        position: fixed !important;
        top: 0 !important;
        border-top-color: rgba(116, 46, 148, .9);
    }

    header .top-line3 {
        max-height: 60px;
        overflow: hidden;
        -webkit-transition: max-height 300ms ease, opacity 300ms ease, padding 300ms ease;
        transition: max-height 300ms ease, opacity 300ms ease, padding 300ms ease;
    }

    header.header-scrolled .top-line3 {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
    }

    header .top-line3 {
        background: rgba(63, 53, 70, .82);
    }

    /* Banda del menú en blanco casi sólido para interiores (ahí no hay foto
       detrás, sólo contenido normal de la página). */
    header:not(.header-scrolled) .header_bottom {
        background: rgba(255, 255, 255, .96);
    }

    /* En portada el header queda fijo desde el primer scroll, y el aviso
       "header-scrolled" del JS del theme no llega hasta los 300px — entre
       0 y 300px el header ya monta sobre el hero pero seguía usando este
       fondo casi opaco (.96), cortando el título con una barra blanca antes
       de que se activara la versión translúcida. Aquí queda transparente
       desde el inicio, sin esperar a ese umbral. */
    .page-inicio header:not(.header-scrolled) .header_bottom {
        background: rgba(255, 255, 255, .38);
        -webkit-backdrop-filter: saturate(160%) blur(6px);
        backdrop-filter: saturate(160%) blur(6px);
    }

    .page-inicio header:not(.header-scrolled) nav ul li a {
        text-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9);
    }

    /* El hero ya no queda debajo del header (que ahora reserva su propio
       espacio), así que sólo necesita un respiro corto arriba */
    .page-inicio .mainBanner .cell-view {
        padding-top: 60px;
        min-height: 560px;
        max-height: 640px;
    }

    /* Estado con scroll en interiores: banda blanca (no hay foto detrás,
       sólo contenido normal de la página) — legible y limpia. */
    .page-interna header.header-scrolled .header_bottom {
        background: rgba(255, 255, 255, .97);
    }

    /* Estado con scroll en portada: el header sigue fijo sobre el hero
       mientras se hace scroll, así que aquí sí debe leerse transparente
       de verdad (antes .82 de blanco + 10px de blur se veía como un
       bloque blanco opaco, no como una capa translúcida). */
    .page-inicio header.header-scrolled .header_bottom {
        background: rgba(255, 255, 255, .38);
        -webkit-backdrop-filter: saturate(160%) blur(6px);
        backdrop-filter: saturate(160%) blur(6px);
    }

    /* Halo claro (no oscuro) para que el texto del menú siga siendo
       legible sobre cualquier tono de foto que quede detrás al hacer
       scroll, ya que el fondo ahora es realmente transparente. */
    .page-inicio header.header-scrolled nav ul li a {
        text-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9);
    }

    header.header-scrolled {
        box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
    }

    /* --- Cabecera compacta al hacer scroll ---------------------------------
       La franja se estrecha de 88px a 66px y el logo la acompaña, siempre
       manteniendo todo centrado en vertical. */
    header .logo img {
        -webkit-transition: height 250ms ease;
        transition: height 250ms ease;
    }

    header.header-scrolled .header_bottom .responsiveSrollWrapper {
        min-height: 66px;
    }

    header.header-scrolled .logo img {
        height: 46px;
    }

    /* Parallax: la foto del slide queda anclada a la ventana y el contenido
       de la página se desliza por encima. */
    .mainSwiperbanner .sliderBg,
    .simpleBanner.bg {
        background-attachment: fixed;
        background-position: 50% 50%;
    }

    /* Velo degradado para que el texto blanco se lea sobre cualquier foto */
    .mainBanner.bgShadow:before {
        background: -webkit-linear-gradient(top, rgba(20, 10, 25, .45) 0%, rgba(20, 10, 25, .10) 40%, rgba(20, 10, 25, .35) 100%);
        background: linear-gradient(to bottom, rgba(20, 10, 25, .45) 0%, rgba(20, 10, 25, .10) 40%, rgba(20, 10, 25, .35) 100%);
    }
}

/* iOS/Android ignoran background-attachment:fixed y lo renderizan mal */
@media (max-width: 991px), (hover: none) {
    .mainSwiperbanner .sliderBg,
    .simpleBanner.bg {
        background-attachment: scroll;
    }
}


/* --------------------------------------------------------------------------
   15. FOOTER
   Era gris oscuro casi negro (#1c1c1c) sin relación con la marca, con cuatro
   columnas apretadas y dos listas de terapias duplicadas (footer.php ya se
   simplificó a 3 bloques: Marca, Enlaces, Contacto). Aquí se lleva a tonos
   claros del morado corporativo y se ordena el espaciado.
   -------------------------------------------------------------------------- */
footer {
    background: -webkit-linear-gradient(135deg, #f3edf6 0%, #ece2f1 100%);
    background: linear-gradient(135deg, #f3edf6 0%, #ece2f1 100%);
    padding: 64px 0 0;
    border-top: 3px solid #742e94;
}

.footerBlock .logo {
    display: inline-block;
    margin-bottom: 16px;
}

.footerBlock .logo img {
    height: 56px;
    width: auto;
}

.footerTagline {
    font-family: "Raleway";
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 14px;
    color: #742e94;
    margin-bottom: 14px;
}

.footerBlock .simple-article p {
    color: #5c5361;
    font-style: italic;
    font-size: 14px;
    line-height: 22px;
}

/* Iconos sociales en círculo, en vez del texto plano "Síguenos en Facebook" */
footer .socialWrapper {
    margin-top: 18px;
}

footer .socialWrapper a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 8px 0 0;
    border-radius: 50%;
    background: #fff;
    color: #742e94;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(116, 46, 148, .18);
}

footer .socialWrapper a:hover {
    background: #742e94;
    color: #fff;
}

.footerTitle {
    margin-bottom: 22px;
}

.footerTitle p {
    color: #2d2431;
    font-family: "Raleway";
    font-weight: 800;
    font-style: normal;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.footerTitle:after {
    background: #742e94;
}

.simple-article.style2 ul li {
    margin-bottom: 12px;
}

.simple-article.style2 ul li a {
    color: #5c5361;
    font-size: 14px;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

.simple-article.style2 ul li a:hover {
    color: #742e94;
    padding-left: 4px;
}

/* Los tres renglones de contacto (ubicación, teléfono, correo) comparten
   .footerContants: icono a la izquierda, texto alineado a 36px, misma
   tipografía — así quedan alineados entre sí en vez de que la ubicación
   tuviera su propio bloque de dos líneas distinto a los demás. */
.footerContants {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.footerContants i {
    position: static;
    top: auto;
    width: 20px;
    font-size: 16px;
    color: #742e94;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.footerContants {
    margin-bottom: 14px;
}

.footerContants a {
    padding-left: 14px;
    color: #5c5361;
    font-size: 14px;
    -webkit-transition: color 150ms linear;
    transition: color 150ms linear;
}

.footerContants a:hover {
    color: #742e94;
}

.bottomInfo {
    border-top-color: rgba(116, 46, 148, .18);
    margin-top: 46px;
}

.copy p {
    color: #5c5361;
    font-size: 13px;
}

.created a {
    color: #5c5361;
    font-size: 13px;
}

.created:hover a span {
    color: #742e94;
}

@media (max-width: 767px) {
    footer {
        padding-top: 40px;
        text-align: center;
    }

    .footerTitle:after {
        left: 50%;
        margin-left: -20px;
    }

    footer .socialWrapper {
        margin-bottom: 10px;
    }

    footer .socialWrapper a {
        margin: 0 6px;
    }

    .footerContants {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        text-align: left;
    }

    .created {
        float: none;
    }

    .copy,
    .created {
        padding: 10px 0;
    }
}

/* --------------------------------------------------------------------------
   16. BANNER PRINCIPAL EN MÓVIL
   En móvil el banner debe verse como una franja de ancho completo y alto
   fijo: la foto se estira a cubrir ese rectángulo (aunque se desproporcione)
   en vez de recortarse con "cover". El texto/botón, sin importar la
   posición elegida en el admin (izquierda/centro/derecha, pensada para
   escritorio), se centra y se reduce para cuadrar en pantallas angostas.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* .sliderBg es el único elemento en flujo normal dentro de .mainBanner
       (.container va con position:absolute), así que es el que le da altura
       real al slide para el autoHeight del swiper (data-auto-height="1").
       No se puede pasar a position:absolute o el slide colapsa a 0px: se
       mantiene "relative" con una altura fija en vez del truco de
       padding-bottom (que sólo respetaba el ancho, no una altura fija). */
    .mainSwiperbanner .sliderBg {
        position: relative;
        height: 350px;
        padding-bottom: 0;
        background-size: 100% 100%;
    }

    .mainBanner .cell-view.banner-pos-izquierda,
    .mainBanner .cell-view.banner-pos-centro,
    .mainBanner .cell-view.banner-pos-derecha {
        justify-content: center !important;
    }

    .mainBanner .rightone.banner-pos-izquierda,
    .mainBanner .rightone.banner-pos-derecha {
        float: none !important;
        width: 100% !important;
    }

    .mainBanner .rightone.banner-pos-izquierda .bannerTitle,
    .mainBanner .rightone.banner-pos-izquierda .bannerBtnWrapper,
    .mainBanner .rightone.banner-pos-izquierda .bannerIcono,
    .mainBanner .rightone.banner-pos-derecha .bannerTitle,
    .mainBanner .rightone.banner-pos-derecha .bannerBtnWrapper,
    .mainBanner .rightone.banner-pos-derecha .bannerIcono {
        text-align: center !important;
    }

    .bannerTitle .h1,
    .bannerTitle .h2,
    .bannerTitle h1,
    .bannerTitle h2 {
        font-size: 16px;
        line-height: 22px;
        padding: 8px 14px;
    }

    .bannerIcono {
        font-size: 32px;
        margin-bottom: 8px;
    }
}