/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Niveliv — Blog (archivo) y artículo (single)
   --------------------------------------------------------------------------
   El header/footer son de Elementor; el listado del blog y los posts usan las
   plantillas nativas de Hello Elementor (main.site-main > .page-header +
   .page-content), sin estilar. Aquí se estilan SOLO esas dos vistas.

   Colores y tipografías: se REUTILIZAN las variables globales del kit de
   Elementor (no se redefinen para no duplicar/heredar nada):
     --e-global-color-primary    #2D354D  (navy, titulares)
     --e-global-color-accent     #61CE70  (verde de marca)
     --e-global-color-secondary  #B53746  (CTA / rojo)
     --e-global-color-text       #7A7A7A  (cuerpo)
     --e-global-typography-primary-font-family  Poppins
     --e-global-typography-text-font-family     Roboto
   Los valores sin global (Inter, borde #e7e7e7, tinte) van como literal.
   ========================================================================== */

body.blog .site-main,
body.single-post .site-main {
	box-sizing: border-box;
	max-width: 1200px;
	margin-inline: auto;
	/* El header de Elementor es position:fixed (~88px): se compensa arriba
	   para que no tape el título (igual criterio que el hero de la home). */
	padding: 120px 24px 96px;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	color: var(--e-global-color-text);
}
body.blog .site-main *,
body.blog .site-main *::before,
body.blog .site-main *::after,
body.single-post .site-main *,
body.single-post .site-main *::before,
body.single-post .site-main *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Cabecera de página (título del archivo / del post)
   -------------------------------------------------------------------------- */
body.blog .page-header,
body.single-post .page-header {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 48px;
}
body.blog .page-header .entry-title,
body.single-post .page-header .entry-title {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-weight: 600;
	line-height: 1.2;
	color: var(--e-global-color-primary);
	text-wrap: balance;
}
/* Barra de acento bajo el título (verde de marca) */
body.blog .page-header .entry-title::after,
body.single-post .page-header .entry-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 22px auto 0;
	border-radius: 999px;
	background: var(--e-global-color-accent);
}

/* ==========================================================================
   1. Listado del blog (body.blog) — rejilla de tarjetas estilo home
   ========================================================================== */
body.blog .page-header .entry-title { font-size: clamp(2rem, 4vw, 2.75rem); }

body.blog .page-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* Tarjeta: borde #E7E7E7, radio 8px, fondo blanco, hover con tinte navy
   (mismo patrón que las tarjetas de la home). position:relative para el
   enlace que cubre toda la tarjeta (ver más abajo). */
body.blog .post {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	overflow: hidden;
	transition: background .3s ease, border-color .3s ease,
	            transform .3s ease, box-shadow .3s ease;
}
body.blog .post:hover {
	background: #2d354d0d;
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(45,53,77,.45);
}

/* Imagen destacada (único <a> hijo directo). Se reordena arriba aunque en el
   HTML vaya tras el título. Tiene overflow:hidden para el zoom. */
body.blog .post > a {
	order: -1;
	display: block;
	overflow: hidden;
	background: #f5f7fb;
	line-height: 0;
}
body.blog .post > a img.wp-post-image {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
body.blog .post:hover > a img.wp-post-image { transform: scale(1.04); }

/* Título — Poppins navy 600 */
body.blog .post .entry-title {
	order: 1;
	margin: 0;
	padding: 20px 24px 0;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.35;
}
body.blog .post .entry-title a {
	color: var(--e-global-color-primary);
	text-decoration: none;
	transition: color .2s ease;
}
body.blog .post:hover .entry-title a { color: var(--e-global-color-secondary); }

/* TARJETA CLICABLE: el ::after del enlace del título se estira sobre toda la
   tarjeta (stretched link). No se usa el enlace de la imagen porque su
   overflow:hidden recortaría el overlay. */
body.blog .post .entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Extracto — Inter, gris, recortado a 3 líneas */
body.blog .post > p {
	order: 2;
	margin: 0;
	padding: 12px 24px 0;
	font-family: "Inter", Sans-serif;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--e-global-color-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "Leer más →" — etiqueta navy→rojo (la tarjeta entera ya es clicable) */
body.blog .post::after {
	order: 3;
	content: "Leer más →";
	margin-top: auto;
	padding: 16px 24px 22px;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: .9rem;
	font-weight: 600;
	color: var(--e-global-color-primary);
	transition: color .2s ease, transform .2s ease;
}
body.blog .post:hover::after { color: var(--e-global-color-secondary); transform: translateX(4px); }

/* Paginación (defensiva, por si el archivo crece) — botones píldora */
body.blog .site-main .navigation,
body.blog .site-main .pagination { margin-top: 56px; }
body.blog .site-main .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
body.blog .site-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid #e7e7e7;
	border-radius: 999px;
	font-family: "Inter", Sans-serif;
	font-weight: 600;
	color: var(--e-global-color-primary);
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.blog .site-main a.page-numbers:hover {
	border-color: var(--e-global-color-primary);
	background: #2d354d0d;
}
body.blog .site-main .page-numbers.current {
	background: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
	color: #fff;
}

/* ==========================================================================
   2. Artículo (body.single-post) — tipografía de lectura
   ========================================================================== */
body.single-post .page-header .entry-title { font-size: clamp(2rem, 3.6vw, 2.6rem); }

body.single-post .page-content {
	max-width: 760px;
	margin-inline: auto;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: 1.07rem;
	line-height: 1.8;
	color: var(--e-global-color-text);
}

/* Párrafos */
body.single-post .page-content p { margin: 0 0 1.45em; }

/* Entradilla: el primer párrafo destaca */
body.single-post .page-content > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--e-global-color-primary);
}

/* Énfasis */
body.single-post .page-content strong { color: var(--e-global-color-primary); font-weight: 600; }

/* Encabezados internos — Poppins navy */
body.single-post .page-content h2,
body.single-post .page-content h3,
body.single-post .page-content h4 {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	color: var(--e-global-color-primary);
	font-weight: 600;
	line-height: 1.25;
	scroll-margin-top: 110px; /* ancla por debajo del header fijo */
}
body.single-post .page-content h2 {
	font-size: 1.7rem;
	margin: 2.2em 0 .7em;
}
body.single-post .page-content h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 4px;
	margin-bottom: .55em;
	border-radius: 999px;
	background: var(--e-global-color-accent);
}
body.single-post .page-content h3 { font-size: 1.32rem; margin: 1.8em 0 .6em; }
body.single-post .page-content h4 { font-size: 1.1rem;  margin: 1.6em 0 .5em; }

/* Enlaces — rojo de marca */
body.single-post .page-content a {
	color: var(--e-global-color-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .2s ease;
}
body.single-post .page-content a:hover { color: #86222e; }

/* Listas */
body.single-post .page-content ul,
body.single-post .page-content ol { margin: 0 0 1.5em; }
body.single-post .page-content li { margin-bottom: .55em; }
body.single-post .page-content ul { list-style: none; padding-left: 1.6em; }
body.single-post .page-content ul > li { position: relative; }
body.single-post .page-content ul > li::before {
	content: "";
	position: absolute;
	left: -1.2em;
	top: .66em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--e-global-color-accent);
}
body.single-post .page-content ol { list-style: none; counter-reset: nv; padding-left: 1.9em; }
body.single-post .page-content ol > li { position: relative; counter-increment: nv; }
body.single-post .page-content ol > li::before {
	content: counter(nv);
	position: absolute;
	left: -1.9em;
	top: .12em;
	width: 1.45em;
	height: 1.45em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #2d354d0d;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: .8em;
	font-weight: 600;
}

/* Cita */
body.single-post .page-content blockquote {
	margin: 1.8em 0;
	padding: 6px 0 6px 26px;
	border-left: 4px solid var(--e-global-color-accent);
	color: var(--e-global-color-primary);
	font-size: 1.15rem;
	font-style: italic;
}
body.single-post .page-content blockquote p:last-child { margin-bottom: 0; }

/* Imágenes y figuras — radio 8px como en la home */
body.single-post .page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}
body.single-post .page-content figure { margin: 1.8em 0; }
body.single-post .page-content figcaption {
	margin-top: .6em;
	font-size: .9rem;
	color: var(--e-global-color-text);
	text-align: center;
}

/* Tablas — fallback para tablas SIN estilos inline (las del contenido actual
   ya traen su propio estilo inline !important y mandan ellas). */
body.single-post .page-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-family: "Inter", Sans-serif;
	font-size: .97rem;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	overflow: hidden;
}
body.single-post .page-content thead th,
body.single-post .page-content tr > th {
	background: var(--e-global-color-primary);
	color: #fff;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-weight: 600;
	text-align: left;
}
body.single-post .page-content th,
body.single-post .page-content td {
	padding: 12px 16px;
	border-bottom: 1px solid #e7e7e7;
	vertical-align: top;
}
body.single-post .page-content tbody tr:nth-child(even) td { background: #f5f7fb; }
body.single-post .page-content tbody tr:last-child td { border-bottom: 0; }

/* Separador */
body.single-post .page-content hr {
	border: 0;
	height: 1px;
	background: #e7e7e7;
	margin: 2.4em 0;
}

/* ==========================================================================
   3. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	body.blog .page-content { gap: 20px; }
}

@media (max-width: 767px) {
	body.blog .site-main,
	body.single-post .site-main { padding: 100px 16px 64px; } /* deja sitio al header fijo */

	body.blog .page-content { grid-template-columns: 1fr; gap: 18px; }

	body.single-post .page-content { font-size: 1.02rem; }
	body.single-post .page-content > p:first-of-type { font-size: 1.1rem; }
	body.single-post .page-content h2 { font-size: 1.45rem; }
	body.single-post .page-content h3 { font-size: 1.2rem; }

	/* Tablas con scroll horizontal en móvil */
	body.single-post .page-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
}