/*
Theme Name: Hew Child
Template: hew
Version: 1.0
Description: Tema hijo de Hew para personalizaciones sin sobrescribir el original.
Author: Pixelvivo
*/

/* Para que el estilo de los post sea a pantalla partida */

@media screen and (min-width: 1032px) {
    .entry-wrapper {
        display: flex;
        flex-wrap: nowrap;
        max-width: none;
        margin: 0 auto;
        align-items: flex-start; /* Asegura que los elementos se alineen en la parte superior */
    }

    .post-thumbnail {
        width: 40%;
        height: 100vh;
        position: -webkit-sticky; /* Para soporte en Safari */
        position: sticky;
        top: 0; /* Ajusta este valor si necesitas un offset desde el top */
        overflow: hidden;
    }

    .post-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

/* Ocultar el header con título automático en PÁGINAS */
.page header.entry-header {
  display: none;
}

/* Ocultar el header y el título automáticos en ENTRADAS */
.single-post .entry-header,
.single-post .entry-title {
  display: none !important;
}

/* ────────────────────────────────────────────── */
/* Layout y ancho de contenido                   */
/* ────────────────────────────────────────────── */
.site-content {
  margin-top: 0 !important; /* quita margen superior global */
}

/* Ampliar ancho en pantallas grandes (páginas) */
@media screen and (min-width: 1024px) {
  .page .entry-content,
  .page .page-content,
  .page .entry-summary,
  .page .entry-footer,
  .page .entry-wrapper,
  .page .entry-header,
  .page .nav-links,
  .page .comments-wrapper {
    max-width: 2000px;
    margin: 0 auto;
  }
}

/* Ocultar thumbnail en páginas */
body.page div.post-thumbnail {
  display: none;
}

/* ────────────────────────────────────────────── */
/* Tipografía y encabezados H1                    */
/* ────────────────────────────────────────────── */
.entry-content h1 {
  font-size: 45px !important; /* ajusta según tu cálculo */
  line-height: 1.2;
  margin-bottom: 1.50em;
}

/* ────────────────────────────────────────────────── */
/* Unifica todos los H2 dentro del contenido del post */
/* ────────────────────────────────────────────────── */
.single-post .entry-content h2 {
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

/* ────────────────────────────────────────────────── */
/* Unifica todos los H3 dentro del contenido del post */
/* ────────────────────────────────────────────────── */
.single-post .entry-content h3 {
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

/* ────────────────────────────────────────────── */
/* Responsive — reducir márgenes laterales       */
/* ────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {
  body.single-post .elementor .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    /* por si tu tema usa padding-inline */
    padding-inline-start: 10px !important;
    padding-inline-end: 10px !important;
  }
}

/* ────────────────────────────────────────────── */
/* Limpieza de H1 vacíos generados por Elementor */
/* ────────────────────────────────────────────── */
.elementor-widget-text-editor h1:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* ────────────────────────────────────────────── */
/* Enlaces en color amarillo en artículos        */
/* ────────────────────────────────────────────── */
.single-post .entry-content a {
  font-weight: 500 !important;
  color: #b15c00 !important;
  text-decoration: underline;
}

/* Enlaces hover */
.single-post .entry-content a:hover {
  color: #6e2701 !important;
}

/* Botones "Entrar" en listados de posts */
.elementor-post__read-more {
  color: #f59e0b !important;
  text-decoration: underline;
}
.elementor-post__read-more:hover {
  color: #d97706 !important;
}

/* ────────────────────────────────────────────── */
/* ESPACIADO ENTRE PÁRRAFOS Y H2 EN ARTÍCULOS    */
/* (segunda opción solicitada)                   */
/* ────────────────────────────────────────────── */
/* Todos los H2 iguales y con espacio */
.single-post .entry-content h2 {
  font-size:32px !important;
  line-height:1.25;
  margin:1.5em 0 0.75em;
}
.single-post .entry-content h2[style]{
  font-size:32px !important; /* quita tamaños raros de Elementor */
}

/* ────────────────────────────────────────────── */
/* Quitar margen por defecto a listas (ul, ol)   */
/* ────────────────────────────────────────────── */
.single-post .entry-content ul,
.single-post .entry-content ol {
  margin: 0 !important;
  padding-left: 1.0em; /* si usas viñetas, puedes ajustar */
}

.elementor-location-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page .site-content,
body.single-post .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.page .entry-header,
body.single-post .entry-header {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* ────────────────────────────────────────────── */
/* Menú hamburguesa personalizado                 */
/* ────────────────────────────────────────────── */
.guapo-hamburguesa {
  font-size: 0;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-image: url('https://pixelvivo.es/wp-content/uploads/2025/05/menuHamburguesaIcono.svg');
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  position: fixed;
  top: 3px;
  right: 15px;
  z-index: 9999;
  transition: none;
}

/* Elimina cualquier efecto hover, focus o active */
.guapo-hamburguesa:hover,
.guapo-hamburguesa:focus,
.guapo-hamburguesa:active {
  all: unset;
  background-image: url('https://pixelvivo.es/wp-content/uploads/2025/05/menuHamburguesaIcono.svg');
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: fixed;
  top: 3px;
  right: 15px;
  cursor: pointer;
  z-index: 9999;
}

/* Cambio de icono cuando el menú está abierto */
.guapo-hamburguesa.abierto {
  background-image: url('https://pixelvivo.es/wp-content/uploads/2025/05/menuHamburguesaBlanco.svg');
  background-size: 100% 100%;
}

/* Ocultar en escritorio */
@media (min-width: 768px) {
  .guapo-hamburguesa {
    display: none;
  }
}

/* ────────────────────────────────────────────── */
/* Capa negra detrás del menú (overlay completo) */
/* ────────────────────────────────────────────── */
.guapo-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.guapo-overlay.activo {
  display: block;
}

/* ────────────────────────────────────────────── */
/* Menú emergente móvil con blur lateral derecho */
/* ────────────────────────────────────────────── */
.guapo-menu-movil {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
  text-align: right;
}

.guapo-menu-movil.abierto {
  display: block;
}

/* ────────────────────────────────────────────── */
/* Enlaces del menú sin hover                    */
/* ────────────────────────────────────────────── */
.guapo-menu-movil a {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  margin-right: 20px;
  margin-top: 20px;
  color: white;
  text-decoration: none;
  pointer-events: auto;
}

.guapo-menu-movil a:hover,
.guapo-menu-movil a:focus,
.guapo-menu-movil a:active {
  color: white;
  background: none;
  text-decoration: none;
}

.guapo-menu-movil a:first-child {
  margin-top: 100px;
}

/* ────────────────────────────────────────────── */
/* FONDO DE ARTICULOS EN COLOR BLANCO             */
/* ────────────────────────────────────────────── */
body.single-post {
  background-color: #ffffff; /* Cambia este color al que tú quieras */
}

/* ────────────────────────────────────────────── */
/* RETOQUES DE HELPIE FAQ                         */
/* ────────────────────────────────────────────── */
.helpie-faq.accordions .accordion__body {
  padding-top:    0 !important;   /* arriba  */
  padding-right: 30px !important; /* derecha */
  padding-bottom: 0 !important;   /* abajo   */
  padding-left:   0 !important;   /* izquierda */
}
.helpie-faq.accordions .accordion__header {
  padding: 15px 50px 15px 0 !important;
}
.helpie-faq.accordions .accordion__item {
  border-bottom: 1px solid #e8e8e8 !important; /* pon aquí el color que quieras */
}
.helpie-faq.accordions .accordion__item .accordion__body {
  margin-bottom: 15px;
}

/* ────────────────────────────────────────────── */
/* Animación suabe entre secciones de un articulo */
/* ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth !important;
}
/* ────────────────────────────────────────────── */
/* Pading para nombre de autor en bio             */
/* ────────────────────────────────────────────── */
body.author .page-header {
  padding-top: 80px;
  max-width: 960px;
  margin: 0 auto;
}

/* ────────────────────────────────────────────── */
/* Intentando solucionar posición de grid en paginas*/
/* ────────────────────────────────────────────── */
@media screen and (min-width: 1032px) {
  body.page .entry-wrapper {
    display: block;
    max-width: 2000px;
    margin: 0 auto;
  }
}