/*
Theme Name: Divi Child
Theme URI: https://onlinenavarra.com
Description: Divi - Tema hijo para Online Navarra
Author: Online Navarra
Author URI:  https://onlinenavarra.com
Template: Divi
*/

 
/* =========================
   Manrope local
========================= */

@font-face {
  font-family: 'Manrope';
  src: url('https://blog.onlinenavarra.com/wp-content/uploads/fonts/manrope-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('https://blog.onlinenavarra.com/wp-content/uploads/fonts/manrope-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('https://blog.onlinenavarra.com/wp-content/uploads/fonts/manrope-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fuente por defecto para todo el sitio */
body, button, input, textarea, select {
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================
   CAMBIO DE HEADER EN 1100px
============================ */

/* Por defecto: solo header de escritorio */
.header-desktop {
  display: block !important;
}

.header-movil {
  display: none !important;
}

/* A 1100px hacia abajo: solo header móvil */
@media (max-width: 1100px) {
  .header-desktop {
    display: none !important;
  }
  .header-movil {
    display: block !important;
  }
}

/* ============================
   VISIBILIDAD HEADERS
   Desktop > 1100px
   Móvil  ≤ 1100px
============================ */

/* Por defecto (por si acaso) */
.et-l--header .header-desktop { display: block; }
.et-l--header .header-movil   { display: none; }

/* Desktop (>1100px) */
@media (min-width: 1101px) {
  .et-l--header .header-desktop { display: block !important; }
  .et-l--header .header-movil   { display: none  !important; }
}

/* Móvil (≤1100px) */
@media (max-width: 1100px) {
  .et-l--header .header-desktop { display: none  !important; }
  .et-l--header .header-movil   { display: block !important; }
}

/* ============================
   Header blog Online Navarra
   (Desktop)
============================ */

/* Menú principal: tipografía, colores, espaciado */
.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul > li > a {
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #4F4E4F; 
  padding: 0 0 8px;
  border-bottom: 4px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul > li:last-child > a {
  margin-right: 0;
}

.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul > li:hover > a,
.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  color: #4F4E4F;
  border-bottom-color: #c00087;
}

/* Botón contacto */
.et-l--header .et_pb_button.contacto-header {
  font-family: 'Manrope';
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 0 26px 8px;
  background-color: #c00087;
  color: #ffffff;
  border: none;
}

.et-l--header .et_pb_button.contacto-header:hover {
  background-color: #111111 !important;
}


/* ============================================
   HEADER DESKTOP – Ajuste columnas (solo >1100px)
============================================ */

@media (min-width: 1101px) {

  /* Fila como flex */
  .et-l--header .et_pb_section:first-child .et_pb_row:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Quitar límites de Divi */
  .et-l--header .et_pb_section:first-child .et_pb_row:first-child .et_pb_column {
    float: none;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Columna logo */
  .et-l--header .et_pb_section:first-child .et_pb_row:first-child .et_pb_column:nth-child(1) {
    flex: 0 0 auto;
    margin-right: 10px;
  }

  /* Columna menú */
  .et-l--header .et_pb_section:first-child .et_pb_row:first-child .et_pb_column:nth-child(2) {
    flex: 1 1 auto;
  }

  /* Columna botón */
  .et-l--header .et_pb_section:first-child .et_pb_row:first-child .et_pb_column:nth-child(3) {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}


/* ============================
   HEADER MÓVIL (≤1100px)
============================ */

/* Barra móvil alineada */
@media (max-width: 1100px) {

  .header-movil .fila-header-movil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
  }

  .header-movil .fila-header-movil .et_pb_column {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-movil .col-menu-movil {
    flex: 0 0 auto;
    text-align: left;
  }

  .header-movil .col-logo-movil {
    flex: 1 1 auto;
    text-align: center;
  }

  .header-movil .col-tel-movil {
    flex: 0 0 auto;
    text-align: right;
  }

  .header-movil .icono-telefono-header {
    font-size: 20px;
    color: #4F4E4F;
  }
	/* El contenedor del menú móvil sirve de referencia */
  .header-movil .mobile_nav {
    position: relative;
  }

  /* El desplegable del menú ocupa todo el ancho de la ventana */
  .header-movil .et_mobile_menu {
    position: absolute;
    top: 100%;              /* justo debajo de la barra */
    left: 0;
    right: 0;
    width: 100vw;           /* ancho viewport */
    max-width: none !important;
    z-index: 9999;
  }
}
@media (max-width:1100px) {

  /* Aseguramos que la barra (hamburguesa + logo + teléfono) queda por encima del panel */
  .header-movil {
    position: relative;
    z-index: 1000;
  }

  /* El contenedor de la hamburguesa sirve de referencia */
  .header-movil .mobile_nav {
    position: relative;
    z-index: 1001;
  }

  /* Panel lateral tipo menú original: fijo a la izquierda */
  .header-movil .et_mobile_menu {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 260px;           /* ajusta: 260–300px */
    max-width: 80vw;        /* por si la pantalla es muy estrecha */
    height: 100vh;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    z-index: 9999;
    padding-top: 70px;      /* altura del header, ajusta si hace falta */
  }

  /* Opcional: que los enlaces se vean como lista vertical limpia */
  .header-movil .et_mobile_menu li a {
    padding: 14px 20px;
  }
}

/* Forzar menú hamburguesa en header móvil desde 1100px */
@media (max-width: 1100px) {
  .header-movil .et_pb_menu__menu {
    display: none !important;
  }
  .header-movil .et_mobile_nav_menu {
    display: block !important; 
  }
}
/* ============================================
   Icono hamburguesa / X en menú móvil
============================================ */

/* Estado normal: hamburguesa */
.header-movil .mobile_menu_bar:before {
  content: "\61";
  font-family: "ETmodules" !important;
  transition: transform .2s ease;
  color:#444!important;
}

/* Menú abierto: distintas clases que usa Divi */
.header-movil .et_pb_menu_opened .mobile_menu_bar:before,
.header-movil .mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d" !important;
}

@media (max-width:1100px) {

  /* Ajustamos tamaño/color del icono */
  .header-movil .mobile_menu_bar:before {
    font-size: 28px;
    color: #333 !important;
  }
  /* El panel lateral sigue por encima del contenido */
  .header-movil .et_mobile_menu {
    z-index: 9999 !important;
	  
  }

  /* La barra (hamburguesa / X) por encima del panel */
  .header-movil .mobile_nav {
    position: relative;
    z-index: 10000;
  }

  /* El icono en sí aún por encima */
  .header-movil .mobile_menu_bar {
    position: relative;
    z-index: 10001;
  }

  /* Volver a posición normal de la hamburguesa/X */
  .header-movil .mobile_menu_bar {
    position: relative !important;
    top: 0;
    left: 0;
    right: auto;
    z-index: 10001; /* por encima del panel */
  }

  /* Dejar hueco por debajo de la X para que no pise "Inicio" */
  .header-movil .et_mobile_menu {
    padding-top: 60px;   /* ajusta 50–70px según veas */
  }
	
  /* Color del icono (hamburguesa/X) para que se vea claro */
  .header-movil .mobile_menu_bar:before {
    color: #4F4E4F !important;
  }
	/* Botón Contacto dentro del menú móvil */
.header-movil .et_mobile_menu .menu-cta-contacto > a {
  display: block;
  margin: 20px 16px 10px;
  padding: 12px 20px;
  text-align: center;
  background: #ff3abb;      /* tu rosa */
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 600;
}


  /* --------- ESTILO GENERAL DEL PANEL --------- */

  /* Quitamos líneas grises y puntos de lista */
  .header-movil .et_mobile_menu {
    border: none !important;  
    box-shadow: 3px 0 15px rgba(0,0,0,0.15) !important;
  }
/* Quitar completamente las líneas separadoras */
.header-movil .et_mobile_menu li,
.header-movil .et_mobile_menu li a {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  margin:0;    
  list-style: none;
}

  /* Enlaces del menú: texto más oscuro, un poco más grande, menos espacio */
  .header-movil .et_mobile_menu li > a {
    font-size: 16px;                  /* un pelín más grande */
    color: #222222 !important;        /* más oscuro */
    font-weight: 500;
    padding: 10px 18px;               /* menos espacio vertical */
  }

  /* Quitamos el “puntito” negro que genera Divi a la izquierda */
  .header-movil .et_mobile_menu li a:before {
    display: none !important;
  }

  /* --------- CTA CONTACTO (ya con tu clase menu-cta-contacto) --------- */

  .header-movil .et_mobile_menu .menu-cta-contacto > a {
    display: block;
    margin: 18px 16px 8px;
    padding: 12px 20px;
    text-align: center;
    background: #ff3abb;
    color: #ffffff !important;
    border-radius: 999px;
    font-weight: 600;
  }

  /* --------- TELÉFONO Y EMAIL EN GRIS CLARO --------- */

  .header-movil .et_mobile_menu .menu-tel > a,
  .header-movil .et_mobile_menu .menu-mail > a {
    display: block;
    margin: 4px 18px 0;
    padding: 2px 0;
    font-size: 14px;
    color: #8c8c8c !important;        /* gris claro */
    font-weight: 400;
  }
}
/* ============================
   Ajuste posición de la X en el menú móvil
============================ */
@media (max-width:1100px) {

  /* Alinear la X a la derecha dentro del panel */
  .header-movil .mobile_nav {
    text-align: right;
  }

  .header-movil .mobile_menu_bar {
    display: inline-block;
    margin-right: 16px;   /* separa un poco del borde derecho */
  }

  /* Dejamos hueco para que el primer ítem no se pegue a la X */
  .header-movil .et_mobile_menu {
    padding-top: 60px;    /* si ves mucho/ poco, baja a 50 o sube a 70 */
  }
}


/* ======================================
   PIE
====================================== */

/* --  PIE  -- */
#pie {
  width: 100%;
  margin: 30px auto 20px;
}
#pie.pie-subir { margin-top: 0;}

.pie-1 {
  text-align: center;
  padding: 3rem 0;
  margin-bottom: 20px;
  background: linear-gradient(to right, #ff5db1 0%, #a80077 100%);
}
  .pie-1 h2 {
    font: 700 2rem 'Manrope', sans-serif !important;
    color: #fff;
    margin: 0;
  }

  .pie-1 p {
    color: #fff;
    margin: .5rem 0 1.5rem 0;
    letter-spacing: 0.3px;
    font-size: 1.3rem;
  }

  .pie-1 ul {
    width: 70%;
    margin: 0 auto;
  }

  .pie-1 li {
    color: #fff;
    text-align: center;
    font-size: 120%;
  }

  .pie-1 li a {
    color: #fff;
    font-weight: 400;
  }

  .pie-1 li img {
    display: inline;
    vertical-align: middle;
    width: auto;
    margin-right: 5px;
  }

  .pie-1 {
    text-align: center;
    color: #fff;
  }

  .pie-1 ul.contact-list {
    list-style: none;
    margin: 1.5rem auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: max-content;
  }

  .pie-1 ul.contact-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    padding-bottom: 0.15rem;
  }

  .pie-1 .contact-icon {
    width: 24px;
    height: auto;
    transition: transform 0.25s ease, filter 0.25s ease;
  }

  .pie-1 .contact-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.25s ease;
	}
    .pie-1 .contact-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 0;
      height: 2px;
      background: #fff;
      transition: width 0.25s ease;
    }
  

  .pie-1 ul.contact-list li:hover .contact-icon {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.15);
  }

  .pie-1 ul.contact-list li:hover .contact-link::after {
    width: 100%;
  }

/* ===========================
   BLOG 2 COLUMNAS / 3 COLUMNAS
   ============================ */

/* Contenedor de las tarjetas en grid */
.blog-dos-columnas .et_pb_salvattore_content,
.blog-tres-columnas .et_pb_salvattore_content {
  display: grid !important;
  /* 48px vertical, 32px horizontal */
  grid-row-gap: 48px !important;
  grid-column-gap: 32px !important;

  height: auto !important;
}
.blog-tres-columnas {
  margin-bottom: 4rem !important;  /* separa el bloque de 3 columnas del CTA rosa */
}


/* 2 columnas arriba */
.blog-dos-columnas .et_pb_salvattore_content {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 3 columnas abajo */
.blog-tres-columnas .et_pb_salvattore_content {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Anular sistema de columnas por defecto de Divi */
.blog-dos-columnas .et_pb_salvattore_content .column,
.blog-tres-columnas .et_pb_salvattore_content .column {
  width: auto !important;
  float: none !important;
  margin: 0 0 2rem!important;
  display: block !important;
}


/* Tarjeta del post */
.blog-dos-columnas .et_pb_salvattore_content .et_pb_post,
.blog-tres-columnas .et_pb_salvattore_content .et_pb_post {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0!important;           /* MUY IMPORTANTE: sin margen inferior */
  padding: 1rem 1rem 3rem !important;          /* sin padding global, lo damos al texto */
  border-radius: 24px;
  overflow: hidden;
  background: #f3f3f3;
}

/* ===========================
   IMAGEN
   ============================ */

/* Sin espacio entre imagen y tarjeta */
.blog-dos-columnas .entry-featured-image-url,
.blog-tres-columnas .entry-featured-image-url {
  margin: 0 !important;
}

/* Imagen a sangre */
.blog-dos-columnas .entry-featured-image-url img,
.blog-tres-columnas .entry-featured-image-url img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===========================
   TEXTO: MISMO PADDING LATERAL Y BUEN RITMO VERTICAL
   ============================ */

/* Título, meta y contenido: mismos laterales */
.blog-dos-columnas .entry-title,
.blog-dos-columnas .post-meta,
.blog-dos-columnas .post-content,
.blog-tres-columnas .entry-title,
.blog-tres-columnas .post-meta,
.blog-tres-columnas .post-content {
  margin: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Título */
.blog-dos-columnas .entry-title,
.blog-tres-columnas .entry-title {
  padding-bottom: 12px !important;
}

/* Meta (si la muestras) */
.blog-dos-columnas .post-meta,
.blog-tres-columnas .post-meta {
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

/* Contenido */
.blog-dos-columnas .post-content,
.blog-tres-columnas .post-content {
  padding-top: 0 !important;
padding-bottom:3rem!important;
	
}

/* Ajustar párrafos interiores */
.blog-dos-columnas .post-content p:first-child,
.blog-tres-columnas .post-content p:first-child {
  margin-top: 0 !important;
}

.blog-dos-columnas .post-content p:last-child,
.blog-tres-columnas .post-content p:last-child {
  margin-bottom: 0 !important;
}

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

@media (max-width: 981px) {
  .blog-dos-columnas .et_pb_salvattore_content,
  .blog-tres-columnas .et_pb_salvattore_content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .blog-dos-columnas .et_pb_salvattore_content,
  .blog-tres-columnas .et_pb_salvattore_content {
    grid-template-columns: 1fr !important;
  }
}


/* ==== ARREGLAR ALTURAS INFLADAS POR DIVI (SALVATTORE) ==== */

.blog-dos-columnas .et_pb_salvattore_content .column,
.blog-tres-columnas .et_pb_salvattore_content .column {
   /*flex: 1 1 auto !important;*/
    height: auto !important;
}

.blog-dos-columnas .et_pb_salvattore_content .column article.et_pb_post,
.blog-tres-columnas .et_pb_salvattore_content .column article.et_pb_post {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
	margin-bottom:0rem !important;
	padding-bottom:0rem !important;
}

/* Degradado oscuro solo en la imagen destacada del título de entradas */
.et_pb_title_container .et_pb_title_featured_image {
    position: relative;
}

.et_pb_title_container .et_pb_title_featured_image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* no afecta a clics */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.0) 0%,
        rgba(0, 0, 0, 0.05) 40%,
        rgba(0, 0, 0, 0.35) 80%,
        rgba(0, 0, 0, 0.55) 100%
    );
}