/*
 Theme Name:     Divi Child
 Theme URI:      https://tusitio.com
 Description:    Tema hijo para Divi
 Author:         Tu Nombre
 Author URI:     https://tusitio.com
 Template:       Divi
 Version:        1.0.0
*/

/* Aquí puedes agregar tu CSS personalizado */

/* 
	Ajustar altura total excluyendo el header y footer
	
	Se aplica a todas las páginas. Para que si tienen poco contenido, el footer quede en la parte inferior 
   
	NOTA: Las variables --menu-height --footer-height se obtienen utilizando javascript (en functions.php)
*/
body, #page-container, #main-content {
  min-height: calc(100vh - var(--menu-height) - var(--footer-height));
  margin: 0;
  padding: 0;
  transition: min-height 0.4s ease;
}
/* Evitar empuje del header y footer */
#main-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* FIN Ajustar altura total excluyeno el header y footer */



/* Para indicar atribución en las fotos de fondo*/
.fondo-credit {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 0.75rem; /* Texto pequeño */
  color: rgba(255, 255, 255, 0.8); /* Blanco con transparencia */
  background-color: rgba(0, 0, 0, 0.3); /* Fondo oscuro semitransparente */
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 10;
}
.fondo-credit a {
  color: #fff;
  text-decoration: none;
}
.fondo-credit a:hover {
  text-decoration: underline;
}
/* FIN Para indicar atribución en las fotos de fondo*/



/* Para superponer capa que atenue la imagen de fondo*/
.fondo-claro {
  position: relative;
}
.fondo-claro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.45); /* Blanco con 45% de opacidad */
  pointer-events: none; /* No bloquea clics en contenido */
  z-index: 1;
}
.fondo-claro > * {
  position: relative;
  z-index: 2; /* Para que el contenido quede encima */
}
/* FIN Para superponer capa que atenue la imagen de fondo*/



/*
	Mostrar crédito justo debajo de la imagen. Tenemos dos casos:
	https://divicon.dev/ocultar-imagen-destacada-wordpress-en-divi/ 
	
	CASO 1 - IMAGEN DESTACADA
		* La imagen destacada la pone automáticamente Divi antes del contenido.
		* Modificando la clase "et_post_meta_wrapper" quitamos esta imagen destacada.
		* Si la imagen destacada esta envuelta por un párrafo "entry-content p:has(img)", hacemos que solo se muestre la imagen.
		* Quitamos el margen inferior de la imagen.
		* Desde el functions.php la volveremos a mostrar junto a sus créditos (leyenda) utilizando la clase "featured-credit".

	CASO 2 - MÓDULO DE IMAGEN DE DIVI
		* La imagen se ha puesto en el contenido utilizando el módulo Imagen de Divi.
		* Se utiliza el plugin "Divi Image Helper" para poder mostrar los créditos (leyenda).
		* Modificando la clase "pac_dih__caption" utilizada por "Divi Image Helper".
*/
.et_post_meta_wrapper img {
    display: none;
}
/* Si la imagen destacada esta envuelta por un párrafo, hacemos que solo se muestre la imagen */
.entry-content p:has(img) {
    margin: 0;
	padding-bottom: 0px;
    display: contents; /* hace que el p no sea contenedor visual */
}
/* Quitamos el margen inferior de la imagen. */
.et_builder_inner_content.et_pb_gutters3 img {
    display: block;
    margin-bottom: 0;
}
.featured-credit, .pac_dih__caption {
	margin-top: 4px;
    font-size: 0.95em !important;
    color: #666;
    text-align: center;
    font-style: italic;
}
/* FIN Mostrar crédito justo debajo de la imagen */



/* Para personalizar el contenido */
.encabezado1-oscuro {
	font-weight: 700;
	font-size: 40px;
	color: #3d3d3d;
	text-align: center;
}
div.contenido-personalizado h1 {line-height:1.3em; margin-bottom:0.8em;}
div.contenido-personalizado h2 {color: #0073c0;}
div.contenido-personalizado p, ul, ol {font-size: 18px; line-height: 1.7em;}
div.contenido-personalizado li {margin-top: 0.8em;}

/* Para utilizar letras en vez de números en lista numerada*/
div.contenido-personalizado ol.letras-parentesis {
    list-style: none !important; /* Quitar estilo automático */
	list-style-type: lower-alpha; /* usa letras: a, b, c... */
    counter-reset: letras; /* Inicializar contador */
 	margin-top: 10px;
	/* text-indent: -20px; /* para que la segunda línea y siguientes comiencen alineadas con el texto */
}
div.contenido-personalizado ol.letras-parentesis li {
    counter-increment: letras; /* Incrementar contador en cada ítem */
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}
div.contenido-personalizado ol.letras-parentesis li::before {
	content: counter(letras, lower-alpha) ") ";
    position: absolute;
    left: 0;
}
/* FIN Para utilizar letras en vez de números en lista numerada */

div.contenido-personalizado ol.numero-punto {
	margin-top: 10px;
	text-indent: -20px; /* para alinear todas las líneas con la primera (no debajo del número) */
}
div.contenido-personalizado ol.numero-punto li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}
.custom-date {
	margin-bottom: 4px;
    font-size: 14px;
    color: #666;
}

/* Título de la entrada de Blog */
.entry-title {
  text-transform: capitalize;
  line-height: 1.3em;
}

/* Fuente original de una noticia */
.original_entry_link {
	text-transform: uppercase;
}
.ocultar {visibility: hidden; /* Ocupa espacio pero no se ve */}
/* FIN Para personalizar el contenido */



/* 
   Para que el módulo de blog tenga una rejilla en la que todos los items de la misma fila tengan la misma altura.
   
   IMPORTANTE: Para que funcione hay que poner el Diseño del módulo Blog en "Anchura completa" no en "Rejilla" 
   
   En este selector solo definimos el formato de la caja que contiene el item o artículo.
   La transormación de anchura completa a rejilla igualando la altura de los items por fila se realiza en javascript (en my-scripts.js)
*/
/* Contenedor del blog */
.blog-igualar-altura .et_pb_ajax_pagination_container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.blog-igualar-altura .et_pb_post {
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 calc(33.333% - 15px); /* 3 columnas */
    max-width: calc(33.333% - 15px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-igualar-altura .et_pb_post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Tablet */
@media (max-width: 980px) and (min-width: 768px) {
    .blog-igualar-altura .et_pb_post {
        flex: 1 1 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
}

/* Móvil */
@media (max-width: 767px) {
    .blog-igualar-altura .et_pb_post {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
/* FIN Estilos para el módulo de blog con alturas iguales */

/* Estilo para los botones de paginación del blog */
/* Asegura que el contenedor de la paginación ocupe todo el ancho */
.et_pb_blog_0 .et_pb_ajax_pagination_container > div {
    width: 100%;
}

/* Aplica el estilo de botón y la alineación */
/* Estilo base del botón */
.pagination a {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #007bff; /* Borde azul */
    border-radius: 5px;
    background-color: white; /* Fondo blanco */
    color: #007bff !important; /* Texto azul */
    font-weight: 500; /* Puedes usar '300' para 'Light' o '100' para 'Thin' */
	line-height: 1.7em;
	font-size: 1.3em;
	/* text-transform: uppercase; /* Mayúsculas */
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transición lenta y suave */
}

/* Efecto al pasar el ratón (hover) */
.pagination a:hover {
    border-color: transparent; /* Elimina el borde */
    background-color: #f0f0f0; /* Fondo gris claro */
    color: #007bff; /* Mantiene el texto azul */
}

/* Estilo inicial de la flecha */
.pagination a .flecha-siguiente::after {
    content: "\276F";
    display: inline-block; /* Crucial para que la transformación funcione */
    transform: translateX(-100%); /* Mueve la flecha fuera de la vista a la izquierda */
    opacity: 0; /* Oculta la flecha */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in;
}

/* Estilo al pasar el ratón (hover) */
.pagination a:hover .flecha-siguiente::after {
    transform: translateX(0); /* Devuelve la flecha a su posición original */
    opacity: 1; /* Muestra la flecha */
	padding-left: 10px;
}

/* Estilo inicial de la flecha */
.pagination a .flecha-anterior::after {
    content: "\276E";
    display: inline-block; /* Crucial para que la transformación funcione */
    transform: translateX(100%); /* Mueve la flecha fuera de la vista a la derecha */
    opacity: 0; /* Oculta la flecha */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in;
}

/* Estilo al pasar el ratón (hover) */
.pagination a:hover .flecha-anterior::after {
    transform: translateX(0); /* Desliza la flecha a su posición original (visible) */
    opacity: 1; /* Muestra la flecha */
	padding-right: 10px;
}

/* Fuerza la alineación de los contenedores a los lados */
.pagination .alignleft {
    float: left !important;
}

.pagination .alignright {
    float: right !important;
}

/* Limpia los floats y añade márgenes */
.pagination {
    overflow: hidden !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

/* 📑 Política de Cookies */
  .cookie-table {
	font-size: 16px;
    line-height: 1.5em;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
  }
  .cookie-table th, .cookie-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    vertical-align: top;
  }
  .cookie-table th {
    background-color: #f5f5f5;
    font-weight: bold;
  }

  /* Adaptación móvil */
  @media screen and (max-width: 768px) {
    .cookie-table thead {
      display: none; /* Ocultamos cabecera */
    }
    .cookie-table tr {
      display: block;
      margin-bottom: 1.5rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px;
      background: #fff;
    }
    .cookie-table td {
      display: block;
      border: none;
      border-bottom: 1px solid #eee;
      padding: 8px 10px;
    }
    .cookie-table td:last-child {
      border-bottom: none;
    }
    /* Mostrar título antes del contenido */
    .cookie-table td::before {
      content: attr(data-label);
      display: block;
      font-weight: bold;
      margin-bottom: 4px;
      color: #333;
    }
  }
 
/* Utilizado para poner 2 textos en línea. En el píe (créditos) */
/* Contenedor flexible para los textos del footer */
#footer-info .texto-en-linea {
  display: flex;                  
  align-items: center;            
  flex-wrap: wrap;                
  gap: 10px;                      /* Espacio entre textos si se mantienen en línea */
  justify-content: flex-start;    /* Mantener textos juntos en escritorio */
}

/* Separador entre los textos en escritorio */
#footer-info .texto-en-linea .creditos:first-child::after {
  content: "|";                   
  margin-left: 10px;              
  color: #888888;                 
}

/* Ajustes específicos para móviles */
@media (max-width: 768px) {
  #footer-info .texto-en-linea {
    flex-direction: column;       
    gap: 0;                       
  }

  #footer-info .texto-en-linea .creditos:first-child::after {
    content: "";                   /* Quitar separador en móvil */
  }

  #footer-info .texto-en-linea .creditos {
    text-align: left;             
  }
}


/* Esconde la bandera que pone Polylang y la cambiamos por la nuestra:
	IMPORTANTE: En la versión de pago sí hay una opción en Idiomas para cambiar la bandera.
				OPCIÓN 1: Cambiar /wp-content/plugins/polylang/flags/catalonia.png
							(No recomendada porque al actualizar el plugin se pierde)
				OPCIÓN 2: Por CSS, (esta) ocultamos la bandera y mostramos la de valencia.
				
 */
.lang-item-va img {
  display: none;
}

/* Inserta tu propia bandera */
.lang-item-va a::before {
  content: url("https://papgermanor.xyz/wp-content/uploads/valencia.png");
  display: inline-block;
  width: 16px;
  height: 11px;
  margin-right: 0.3em;
}