/* ==========================================================================
   Estilos propios de Consciencia Perinatal
   Overrides sobre main.css (plantilla ARTDAY) para adaptarlos a la marca.
   ========================================================================== */

/* 1) Logotipo: fondo blanco para que se distinga sobre fondos oscuros/imágenes,
      y tamaño mayor para que se lea mejor y no se vea borroso. */
.ws-logo{
    max-width: 130px;
    padding: 10px 20px;
    border-radius: 4px;
}

/* 2) Color de texto general: gris más oscuro que el original (#999) para que
      destaque mejor sobre el fondo blanco, manteniendo la estética del sitio. */
body{
    color: #6e6e6e;
}
.ws-journal-caption p,
.ws-item-price{
    color: #6e6e6e;
}

/* 3) Featured Collections (Inicio): título de cada imagen ("Acompañamiento y
      Psicoterapia", "Formación", "Investigación") más pequeño y legible sobre
      la imagen, en vez de desbordarla. */
.featured-collections-item .caption h3{
    font-size: 14px;
    letter-spacing: 2px;
    padding: 0 10px;
}
.featured-collections-item .caption h3:before,
.featured-collections-item .caption h3:after{
    display: none;
}

/* 4) Homogeneizar tamaño de las imágenes de "Featured Collections" (Inicio),
      para que Investigación no se vea más pequeña que el resto. */
.featured-collections-item .thumbnail{
    height: 280px;
    overflow: hidden;
}
.featured-collections-item .thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 5) Equipo (Nosotras): foto e información en fila (lado a lado) en vez de
      foto encima y texto debajo. */
.ws-about-team-item{
    display: flex;
    align-items: flex-start;
    text-align: left;
}
.ws-about-team-item img{
    width: 220px;
    /*height: 220px;*/
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 25px;
}
.ws-about-team-item .caption{
    padding-top: 0;
}
@media (max-width: 767px){
    .ws-about-team-item{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ws-about-team-item img{
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* 6) Journal (Actividades): imágenes con el mismo tamaño y textos alineados
      e iguales al resto del sitio. */
.ws-journal-image{
    height: 220px;
    overflow: hidden;
}
.ws-journal-image figure{
    height: 100%;
    margin: 0;
}
.ws-journal-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ws-journal-caption{
    text-align: left;
}

/* 7) Journal horizontal (Investigación - Divulgación): imagen a la izquierda,
      texto a la derecha, en vez de apilados. */
.ws-journal-item-horizontal{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.ws-journal-item-horizontal a{
    display: flex;
    align-items: center;
    width: 100%;
}
.ws-journal-item-horizontal .ws-journal-image{
    width: 220px;
    height: 160px;
    flex-shrink: 0;
    margin-right: 25px;
}
.ws-journal-item-horizontal .ws-journal-caption{
    padding: 0;
}
@media (max-width: 767px){
    .ws-journal-item-horizontal,
    .ws-journal-item-horizontal a{
        flex-direction: column;
        align-items: flex-start;
    }
    .ws-journal-item-horizontal .ws-journal-image{
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* 8) Psicoterapia (¿Cómo trabajamos?): 2 items por fila, cada uno con el
      texto a la izquierda y la imagen a la derecha (lado a lado). */
.ws-como-trabajamos-item{
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}
.ws-como-trabajamos-img {
    width: 140px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: 20px;
    padding-top: 30px;
}
@media (max-width: 767px){
    .ws-como-trabajamos-item{
        flex-direction: column;
        align-items: center;
    }
    .ws-como-trabajamos-img{
        margin-left: 0;
        margin-top: 20px;
    }
}

/* 9) Parallax Header (todas las secciones): mayor altura para mostrar más
      imagen de fondo de arriba a abajo, sin afectar al ancho (ya ocupa el
      100% del viewport). Pequeño margen superior para separarlo del menú. */
.ws-parallax-header{
    height: 400px;
    /*margin-top: 5px;*/
}

/* 10) Contenido de texto (todas las páginas): párrafos justificados para que
      el texto quede alineado tanto a la izquierda como a la derecha, en vez
      de con el borde derecho irregular (ragged right) por defecto. */
.ws-page-container p,
.ws-about-content p{
    text-align: justify;
}

/* 11) Logo (Actividades): pequeño padding para que no quede pegado a los
      bordes del logotipo. */
.ws-logo img[src*="Logo.svg"]{
    padding: 3px;
}

/* 12) Header (todas las páginas): padding vertical para dar más espacio de
      separación entre el menú/logo y el contenido de la página (imagen
      parallax), manteniendo el menú y el logo centrados y bien alineados. */
.ws-header-static {
    position: relative;
    padding: 22px 0;
}

/* 13) Journal Page (Actividades, Investigación y _ActividadesRealizadas): los
      <h3> usan la misma tipografía que los <p> (Merriweather), sin modificar
      su tamaño, peso ni mayúsculas. Afecta a todas las vistas que usan la
      clase .ws-journal-page. */
.ws-journal-page h3{
   /* font-family: 'Merriweather', serif;*/
}

/* 14) Formación (Formaciones realizadas): al estar el partial _ActividadesRealizadas
      anidado dentro de .ws-about-content, sus <h3> heredaban el uppercase forzado
      de .ws-about-content h3 (main.css), mostrándose en mayúsculas aunque el texto
      esté escrito en minúsculas. Se anula aquí para respetar el texto original. */
.ws-about-content .ws-journal-page h3{
    text-transform: none;
}

/* 15) Política de Privacidad: cabecera con imagen de fondo fija en CSS (en vez
      del plugin parallax.js), ya que con esta imagen concreta el recorte se
      aplicaba en horizontal e ignoraba el posicionamiento vertical deseado.
      Con background-position se controla directamente y de forma fiable qué
      parte de la imagen se muestra. */
.ws-parallax-header-static{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

/* 16) Logo en móvil (todas las páginas): .ws-logo.ws-center usa
      "position: absolute; top: 50%; left: 50%" para centrarse respecto al
      <nav> (que en Bootstrap es "position: relative" por defecto). En móvil,
      ese <nav> puede colapsar su altura real a casi 0px, ya que tanto el
      botón de menú como el propio logo están posicionados en absoluto y no
      aportan altura al flujo del documento. Esto provoca que el cálculo del
      "50%" sea inestable y el logo termine desplazado muy abajo (o muy
      arriba) de forma impredecible. Se soluciona sacándolo del
      posicionamiento absoluto solo en móvil, para que ocupe su lugar natural
      justo debajo del botón de menú.
      Además, en Index.cshtml el logo lleva un estilo en línea
      ("style='max-width: 250px; margin-top: 25px;'") pensado para compensar
      el centrado absoluto en escritorio. Al quedar ese estilo con mayor
      especificidad que una clase CSS normal, hace falta "!important" para
      forzar un margen correcto una vez quitado el posicionamiento absoluto. */
@media only screen and (max-width: 767px){
    .ws-logo.ws-center{
        position: static !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        margin: -30px auto 0 auto !important;        
        text-align: center;
    }
}

/* 17) Botones "Colaboradores" y "Contacto" en móvil (barra superior): main.css
      los oculta por completo por debajo de 768px con
      ".ws-topbar ul.ws-shop-menu li.ws-shop-account{display: none;}". Se
      vuelven a mostrar aquí. Como ".ws-topbar" tiene una altura fija de 36px
      en main.css (pensada para una sola línea de texto) y los botones no
      caben en ese alto, se pasa a altura automática y se permite que el
      menú ocupe varias líneas si hace falta, sin depender de "float"
      (que no aporta altura al contenedor padre y por eso recortaba la barra).
      Además, el botón de menú (.navbar-toggle) usa en main.css
      "position: absolute; top: -55px" para subir visualmente hasta la altura
      del topbar original (36px fijos). Al pasar el topbar a altura
      automática, ese valor fijo ya no coincide y el botón queda descuadrado
      (más abajo) respecto a "Colaboradores"/"Contacto". Se anula ese
      posicionamiento absoluto para que el botón fluya en su lugar natural,
      dejando que el logo (regla 16) se alinee correctamente debajo. */
@media only screen and (max-width: 768px){
    .ws-topbar{
        height: auto;
        padding: 8px 0;
    }
    .ws-topbar ul.ws-shop-menu li.ws-shop-account{
        display: inline-block;
        float: none;
    }
    .ws-topbar .pull-right{
        float: none !important;
        text-align: center;
    }
    ul.ws-shop-menu{
        padding-left: 0;
        margin: 0;
    }
    @media only screen and (max-width: 768px) {
        .ws-header-transparent .navbar-toggle {
            top: -60px;
        }
    }
}