/*
Theme Name: Conexa
Theme URI: https://conexionmasautentica.es
Author: Conexión Más Auténtica
Description: Theme clásico a medida para Conexión Más Auténtica.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: conexa
*/

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
	--color-green: #1f8050;
	--color-green-dark: #1f6b45;
	--color-gold: #ffecba;
	--color-gold-dark: #ffd975;
	--color-cream: #fff4d6;
	--color-dark: #241c14;
	--color-gray-light: #f2f2f2;
	--color-gray-dark: #323232;
	--color-text: #2b2620;
	--color-white: #ffffff;

	--font-base: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--container-width: 1200px;
	--mobile-header-height: 95px;
}

/* ==========================================================================
   Tipografías
   ========================================================================== */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/inter-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/inter-medium.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/inter-bold.woff2") format("woff2");
}

/* ==========================================================================
   Reset básico
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.5;
}

.site-header,
.site-footer {
	flex-shrink: 0;
}
.site-header {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	padding-bottom: 1rem;
}

.site-main {
	flex: 1 0 auto;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

p {
	text-align: justify;
	hyphens: auto;
}

/* Escala tipográfica base para los headings. Antes no había ninguna
   regla genérica acá: cada heading heredaba el tamaño por defecto del
   navegador (h2 = 1.5em), y los pocos h2/h3 usados en secciones puntuales
   solo pisaban el color, no el tamaño. */
h1 {
	font-size: 3rem;
}

h2 {
	font-size: 1.95rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1rem;
}

a {
	color: var(--color-green);
	text-decoration: none;
	font-weight: 700;
}

a:hover,
a:focus {
	text-decoration: underline;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El reset de arriba saca los bullets por defecto (necesario para menús,
   paginación, etc.). Se restauran acá para las listas dentro de
   contenido real: posts, páginas estándar, y las páginas hardcodeadas
   (Sobre mí, Focusing, presentación de portada). */
.blog-single__content ul,
.page-content ul,
.about-block__inner ul,
.focusing-block__inner ul,
.home-presentacion__text ul,
.title-banner__featured ul,
.publicacion-card__desc ul {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
	list-style: disc;
}

.blog-single__content li,
.page-content li,
.about-block__inner li,
.focusing-block__inner li,
.home-presentacion__text li,
.title-banner__featured li,
.publicacion-card__desc li {
	margin-bottom: 0.5rem;
}

button {
	font-family: inherit;
	cursor: pointer;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.container--padded {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   Alineación de imágenes (clases del editor clásico de WordPress)
   El tema no traía soporte propio para esto; sin él, cualquier estilo
   genérico de imágenes puede pisar la alineación que eligió el usuario
   al editar un post o página.
   ========================================================================== */
.alignleft {
	float: left;
	margin: 0.5rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	width: 100%;
	background: var(--color-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 24px 1.25rem 12px;
}

.site-logo {
	flex-shrink: 0;
}

.site-logo img {
	width: 90px;
	height: auto;
}

.site-header__divider {
	width: 1px;
	align-self: stretch;
	background: var(--color-gold);
}

/* En desktop, corre el bloque de texto/nav para que arranque alineado
   con el contenido del sitio (mismo punto que .container), dejando el
   logo pegado al borde izquierdo. La resta es el offset natural del
   divider sin este margen extra: padding del header (1.25rem) + ancho
   del logo (90px) + gap (0.625rem). */
@media (min-width: 881px) {
	.site-header__divider {
		margin-left: max(0px, calc((100vw - var(--container-width)) / 2 - 111px));
	}
}

.site-header__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.site-tagline {
	margin: 0;
	color: var(--color-green);
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

.site-nav__list a {
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(51, 51, 51, 0.5);
}

.site-nav__list a:hover,
.site-nav__list a:focus {
	text-decoration: none;
	color: var(--color-green);
}

.site-nav__list .current-menu-item > a {
	color: #333;
	font-weight: 700;
}

.site-nav__list li {
	position: relative;
}

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 240px;
	padding: 10px 24px;
	background: var(--color-gray-light);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__list .sub-menu li {
	border-bottom: 1px solid #dcdcdc;
}

.site-nav__list .sub-menu li:last-child {
	border-bottom: none;
}

.site-nav__list .sub-menu a {
	display: block;
	padding: 14px 0;
	white-space: nowrap;
	letter-spacing: -0.02em;
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 2.8rem;
	height: 2.8rem;
	min-width: 2.8rem;
	min-height: 2.8rem;
	border: 0;
	background: none;
	padding: 0;
}

.menu-toggle img {
	width: 26px;
	height: 26px;
}

.menu-toggle .icon-close {
	display: none;
}

.menu-toggle.is-active .icon-open {
	display: none;
}

.menu-toggle.is-active .icon-close {
	display: block;
}

.mobile-menu {
	display: none;
}

@media (max-width: 880px) {
	.site-nav {
		display: none;
	}

	.site-header__inner {
		min-height: var(--mobile-header-height);
	}

	.site-logo img {
		width: 15vw;
	}

	.site-tagline {
		font-size: 1rem;
	}

	.menu-toggle {
		display: flex;
	}

	.menu-toggle img {
		width: 100%;
		height: 100%;
	}

	.mobile-menu {
		display: block;
		position: fixed;
		top: var(--mobile-header-height);
		left: 0;
		right: 0;
		height: calc(100vh - var(--mobile-header-height));
		height: calc(100dvh - var(--mobile-header-height));
		z-index: 90;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow: hidden;
	}

	.mobile-menu.is-open {
		transform: translateX(0);
	}

	/* Mismo circulito decorativo que usamos en el resto del sitio, pero
	   sentado en el borde inferior de la pantalla: con la mitad tapada
	   por el propio corte del panel (overflow: hidden en .mobile-menu)
	   queda como un semicírculo. Vive en .mobile-menu (que ya no
	   scrollea) y no en el <nav> (que sí), para que quede fijo aunque se
	   haga scroll del menú. */
	.mobile-menu::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 6rem;
		height: 6rem;
		transform: translate(-50%, 50%);
		border-radius: 999px;
		background: var(--color-gold-dark);
		border: 0.75rem solid var(--color-white);
		pointer-events: none;
	}

	.mobile-menu nav {
		display: block;
		height: 100%;
		overflow-y: auto;
	}

	.mobile-menu__list {
		background: #ffd975;
		height: 100vh;
		padding: 3rem 24px 40px;
	}

	.mobile-menu__list li {
		border-bottom: 1px solid #fcebbe;
	}

	.mobile-menu__list a {
		display: block;
		padding: 16px 16px 16px 0;
		text-align: right;
		color: var(--color-text);
		font-size: 1.1rem;
		letter-spacing: -0.02em;
	}

	.mobile-menu__list .sub-menu li {
		border-bottom: 0;
	}

	.mobile-menu__list .sub-menu a {
		font-size: 1rem;
	}

	/* Los submenús (nivel 2) arrancan colapsados, con un botón ">" para
	   desplegarlos, en vez de mostrarse siempre expandidos como en
	   desktop (donde se ven al hacer hover). El botón lo inyecta
	   main.js.
	   El <li> se vuelve flex-wrap: la fila (botón + link) ocupa una
	   línea, y el .sub-menu, al no entrar en esa línea, pasa solo a la
	   siguiente sin importar cuánto crezca — así el botón no se corre de
	   lugar cuando el submenú se abre. */
	.mobile-menu__list li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.mobile-menu__list li.menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.mobile-menu__list .sub-menu {
		display: none;
		flex: 1 1 100%;
	}

	.mobile-menu__list li.menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.mobile-menu__toggle {
		order: -1;
		flex: 0 0 auto;
		width: 3rem;
		height: 3rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		padding: 0;
		color: var(--color-text);
	}

	.mobile-menu__toggle::after {
		content: '>';
		display: inline-block;
		font-size: 2.2rem;
		transition: transform 0.2s ease;
		color: var(--color-green);
	}

	.mobile-menu__list li.menu-item-has-children.is-open .mobile-menu__toggle::after {
		transform: rotate(90deg);
	}

	body.mobile-menu-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   Title banner (banner de título de sección)
   ========================================================================== */
.title-banner {
	display: flex;
	flex-direction: column;
}

.title-banner__top {
	background: var(--color-gold);
	height: 5.625rem;
	border-bottom: 0.75rem solid var(--color-white);
}

.title-banner__top-inner {
	position: relative;
	height: 100%;
}

.title-banner__bottom {
	background: var(--color-cream);
	padding: 3.75rem 0 3rem;
}

.title-banner__circle {
	position: absolute;
	bottom: -0.375rem;
	left: 1.25rem;
	width: 6rem;
	height: 6rem;
	transform: translateY(50%);
	border-radius: 100%;
	background: var(--color-cream);
	border: 0.75rem solid var(--color-white);
}

.title-banner__title {
	margin: 0 0 12px;
	color: var(--color-green);
	font-size: 2rem;
	font-weight: 700;
}

.title-banner__subtitle {
	margin: 0;
	max-width: 760px;
}

.title-banner__featured {
	margin-top: 12px;
}

.title-banner__featured p {
	margin: 0;
}

.title-banner__date {
	margin: 0 0 12px;
	font-weight: 700;
}

.title-banner__tags {
	margin: 0;
}

.title-banner__tags a {
	color: var(--color-green-dark);
}

/* ==========================================================================
   Portada (home): secciones full-width con costura decorativa
   ========================================================================== */
.home-section {
	position: relative;
	width: 100%;
	border-bottom: 0.75rem solid var(--color-white);
}

/* Zócalo de ancho completo, anclado siempre al borde inferior real de la
   sección (no al flujo del contenido, que puede no llenar toda la altura
   cuando la sección tiene una altura propia, como el hero con aspect-ratio).
   Sirve para posicionar el círculo de costura alineado con la misma
   columna que el resto del contenido (igual que .title-banner__circle). */
.home-seam {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
}

.home-seam__circle {
	position: absolute;
	bottom: -0.375rem;
	left: 1.25rem;
	width: 6rem;
	height: 6rem;
	transform: translateY(50%);
	border-radius: 100%;
	border: 0.75rem solid var(--color-white);
}

.home-seam__circle--gold {
	background: var(--color-gold-dark);
}

.home-seam__circle--cream {
	background: var(--color-cream);
}

.home-hero {
	background-image: url('img/banner-main.png');
	background-size: cover;
	background-position: center;
	aspect-ratio: 1280 / 600;
}

.home-hero__badges {
	position: absolute;
	width:100%;
	left: 0;
	right: 0;
	bottom: 8rem;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.home-hero__badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #483936a6;
	border-radius: 5px;
	padding: 1rem 1.5rem;
}

.home-hero__badge img {
	width: auto;
	height: 50px;
}

.home-hero__badge span {
	font-weight: 700;
	font-size: 1.2rem;
}

.home-hero__badge:nth-child(1) span {
	color: var(--color-gold-dark);
}

.home-hero__badge:nth-child(2) span {
	color: #3fa416;
}

.home-hero__badge:nth-child(3) span {
	color: var(--color-green);
}

/* Vista previa por encima de los badges: se ancla al mismo contenedor
   position:absolute que los badges (.home-hero__badges) y se ubica
   justo arriba de ellos (bottom:100%). Cada imagen está oculta por
   defecto; el combinador de hermanos (~) muestra la que corresponde
   según qué badge esté en :hover. */
.home-hero__preview {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.home-hero__preview-img {
	display: none;
	width: 20rem;
	height: 20rem;
	filter: opacity(0.5);
}

.home-hero__badge--1:hover ~ .home-hero__preview .home-hero__preview-img--1,
.home-hero__badge--2:hover ~ .home-hero__preview .home-hero__preview-img--2,
.home-hero__badge--3:hover ~ .home-hero__preview .home-hero__preview-img--3 {
	display: block;
}

.home-conexiones {
	background: var(--color-gold-dark);
}

.home-conexiones__inner {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.home-conexiones__row {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

.home-conexiones__intro {
	flex: 1 1 50%;
	align-self: center;
}

.home-conexiones__intro span {
	margin: 0;
	color: var(--color-gray-dark);
	font-size: 3rem;
	font-weight: 400;
}

.home-conexiones__intro span strong {
	font-weight: 700;
}

.home-conexiones__cards {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1 1 50%;
}

.home-card {
	/* position:relative (sin z-index) para que compita en el mismo paso
	   de pintado que .home-card__connector (también posicionado) y así
	   el orden del DOM decida el apilamiento entre ambos. */
	position: relative;
	max-width: 26rem;
	background: var(--color-white);
	border-radius: 10px;
	padding: 1.5rem;
	text-align: center;
}

.home-card__title {
	margin: 0 0 0.5rem;
	color: var(--color-green);
	font-size: 1.15rem;
	font-weight: 700;
}

.home-card__text {
	margin: 0;
	color: #5a5a5a;
}

/* Círculos "puzzle" entre las cards: uno arriba de la 2da (a la
   izquierda) y otro arriba de la 3ra (a la derecha), a caballo entre
   ambas tarjetas. Son hermanas de las cards (no hijas), insertadas en
   el orden del DOM entre una y otra: así el apilamiento visual sale
   solo (card1 < conector < card2 < conector < card3) sin z-index.
   Altura 0 para no sumar espacio extra al gap del flex column; el
   margin negativo compensa el gap doble que introduce este ítem extra. */
.home-card__connector {
	position: relative;
	max-width: 26rem;
	height: 0;
	margin-top: -0.375rem;
	margin-bottom: -0.375rem;
}

.home-card__connector::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--color-white);
	border: 0.5rem solid var(--color-gold-dark);
}

.home-card__connector--left::after {
	left: 3rem;
}

.home-card__connector--right::after {
	right: 3rem;
}

.home-presentacion {
	width: 100%;
	background: var(--color-gold);
}

.home-presentacion__inner {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.home-presentacion__row {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
}

.home-presentacion__photo {
	position: relative;
	flex: 1 1 50%;
}

.home-presentacion__photo img {
	display: block;
	width: 60%;
	height: auto;
	margin-left: auto;
	border-radius: 20px;
}

.home-presentacion__badge {
	position: absolute;
	bottom: 0;
	right: 60px;
	transform: translateY(50%);
	background: var(--color-gold);
	border-radius: 20px;
	padding: 1rem 1.5rem;
}

.home-presentacion__badge p {
	margin: 0;
	color: var(--color-green);
	font-size: 2rem;
	font-weight: 700;
}

.home-presentacion__text {
	flex: 1 1 50%;
	min-width: 0;
}

.home-presentacion__text p {
	margin: 0 0 1rem;
}

@media (max-width: 880px) {
	.home-hero {
		height: 600px;
	}

	.home-conexiones__row,
	.home-presentacion__row {
		flex-direction: column;
	}

	.home-conexiones__intro span {
		font-size: 1.95rem;
		text-align: center;
		display:block;
	}

	.home-presentacion__photo {
		width: 100%;
		margin: 0 auto;
	}

	.home-presentacion__photo img {
		width: 100%;
	}

	.home-presentacion__badge p {
		font-size: 1.4rem;
	}

	.home-hero__badges {
		flex-direction: column;
		align-items: flex-start;
		bottom: 1.25rem;
		margin-bottom: 3rem;
	}
}

/* ==========================================================================
   Blog (buscador y etiquetas)
   ========================================================================== */
.blog-filters {
	padding-top: 5rem;
}

.blog-filters__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.search-form {
	display: flex;
	position: relative;
}

.search-form label {
	display: block;
	width: 100%;
}

.search-form .search-field {
	width: 100%;
	padding: 0.75rem 1.25rem 0.75rem 2.75rem;
	border: 1px solid var(--color-green);
	border-radius: 0.625rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-text);
}

.search-form .search-field::placeholder {
	color: var(--color-green);
}

.search-form .search-submit {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.75rem;
	height: 100%;
	background: url("img/icon_search.png") no-repeat center / 1.1rem auto;
	border: 0;
	font-size: 0;
	text-indent: -9999px;
	color: var(--color-green);
}

.blog-tags__label {
	margin: 0 0 0.5rem;
	color: var(--color-green);
	font-weight: 700;
}

.blog-tags__wrap {
	position: relative;
}

@media (max-width: 880px) {
	.blog-tags__wrap {
		max-height: 18.75rem;
		overflow: hidden;
	}

	.blog-tags__wrap.is-expanded {
		max-height: none;
	}

	.blog-tags__wrap:not(.is-expanded)::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3rem;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-white));
		pointer-events: none;
	}

	.blog-tags__toggle {
		display: block;
		margin: 0.75rem auto 0;
		border: 0;
		background: none;
		padding: 0;
		color: var(--color-green);
		font-weight: 700;
		text-decoration: underline;
	}
}

.wp-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border: 1px solid var(--color-green);
	border-radius: 0.625rem;
	padding: 1rem;
}

.wp-tag-cloud li {
	list-style: none;
}

.wp-tag-cloud a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	background: var(--color-cream);
	border-radius: 0.625rem;
	color: var(--color-text);
	font-size: 0.9rem !important;
}

.wp-tag-cloud a:hover,
.wp-tag-cloud a:focus {
	text-decoration: none;
	background: var(--color-gold);
}

/* ==========================================================================
   Blog (listado de posts)
   ========================================================================== */
.blog-list {
	padding-top: 3rem;
	padding-bottom: 3rem;
	display: flex;
	gap: 1.5rem;
}

.blog-list__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.blog-card {
	background: var(--color-cream);
	border-radius: 0.625rem;
	padding: 1.25rem 1.25rem 2.5rem;
	display: flex;
	flex-direction: column;
}

.blog-card__thumb {
	display: block;
	margin-bottom: 1rem;
}

.blog-card__thumb img {
	width: 100%;
	height: auto;
	border-radius: 0.625rem;
}

.blog-card__body {
	min-width: 0;
}

.blog-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.4rem;
}

.blog-card__title a {
	color: var(--color-green-dark);
}

.blog-card__excerpt {
	margin: 0 0 0.75rem;
	text-align: justify;
	hyphens: auto;
}

.blog-card__date {
	margin: 0;
	font-weight: 700;
}

/* ==========================================================================
   Blog (entrada individual)
   ========================================================================== */
.blog-single {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.page-content {
	padding-top: 3rem;
	padding-bottom: 5rem;
}

/* El marco (fondo crema + padding) es para imágenes sueltas, a ancho
   completo. Si el usuario alineó la imagen a izquierda/derecha/centro
   desde el editor de WordPress, esa elección manda por encima del
   tratamiento genérico: se excluyen de esta regla más abajo. */
.page-content img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin-top: 0;
	margin-bottom: 2.5rem;
	padding: 40px;
	background: var(--color-cream);
	border-radius: 10px;
}

.page-content img.alignleft,
.page-content img.alignright {
	width: auto;
	padding: 20px;
}

/* Solo se justifican los párrafos de texto corrido. */
.blog-single__content p {
	text-align: justify;
	hyphens: auto;
}

/* Los párrafos que solo envuelven una imagen y los pies de foto, no. */
.blog-single__content p:has(> img),
.blog-single__content p:has(> a > img),
.blog-single__content figcaption,
.blog-single__content .wp-caption-text {
	text-align: start;
	hyphens: manual;
}

/* Mismo criterio que .page-content: el marco es para imágenes sueltas
   a ancho completo, no para las que el usuario alineó a un costado
   desde el editor (ver exclusión más abajo). */
.blog-single__content img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin-top: 0;
	margin-bottom: 2.5rem;
	padding: 40px;
	background: var(--color-cream);
	border-radius: 10px;
}

.blog-single__content img.alignleft,
.blog-single__content img.alignright {
	width: auto;
	padding: 20px;
}

@media (max-width: 880px) {
	.blog-single__content img {
		padding: 20px;
	}
}

.blog-single-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin-top: 2rem;
	margin-bottom: 5rem;
}

.blog-single-nav__prev,
.blog-single-nav__next {
	min-width: 0;
}

.blog-single-nav a {
	font-weight: 700;
	color: var(--color-green-dark);
}

.blog-pagination {
	display: flex;
	justify-content: center;
	padding-bottom: 3rem;
}

.blog-pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	background: var(--color-cream);
	border-radius: 0.625rem;
	color: var(--color-text);
	font-size: 0.9rem;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers:focus {
	text-decoration: none;
	background: var(--color-gold);
}

.blog-pagination .page-numbers.current {
	background: var(--color-green);
	color: var(--color-white);
	font-weight: 700;
}

.blog-pagination .page-numbers.dots {
	background: transparent;
}

@media (max-width: 640px) {
	.blog-list {
		flex-direction: column;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-contact {
	position: relative;
	background: var(--color-gold-dark);
	border-top: 0.75rem solid var(--color-white);
	padding: 5rem 0 40px;
}

.footer-contact__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
}

.footer-contact__circle {
	position: absolute;
	top: 0;
	left: 1.25rem;
	width: 6rem;
	height: 6rem;
	transform: translateY(-50%);
	border-radius: 999px;
	background: var(--color-gold-dark);
	border: 0.75rem solid var(--color-white);
}

.footer-contact__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer-contact__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.footer-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	color: var(--color-green);
}

.footer-contact__text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

.footer-icon svg,
.footer-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.footer-bottom {
	background: var(--color-green-dark);
	color: var(--color-white);
	padding: 2rem 0 3rem;
}

.footer-bottom__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	font-size: 0.7rem;
	color: var(--color-white);
}

.footer-social a {
	color: var(--color-white);
}

.footer-icon-img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.footer-social a:hover,
.footer-social a:focus {
	text-decoration: none;
	opacity: 0.8;
}

.footer-license {
	margin: 0;
	font-size: 0.85rem;
	flex: 1;
	min-width: 240px;
}

.footer-license a {
	color: var(--color-white);
}

/* ==========================================================================
   Página "Sobre mí" (about)
   ========================================================================== */
.about-block {
	position: relative;
	width: 100%;
	border-top: 0.75rem solid var(--color-white);
}

.about-block--1 {
	border-top: none;
}

.about-block__inner {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.about-block__inner h2{
	color: var(--color-green);
}

.about-block--1 {
	background: #ffffff;
}

.about-block--2 {
	background: #fff9ea;
}

.about-block--3 {
	background: #fff4d6;
}

.about-block--4 {
	background: #ffeec1;
}

.about-block--5 {
	background: #ffe8ac;
}

.about-block--6 {
	background: #ffe398;
}

.about-intro {
	display: flex;
	align-items: flex-end;
	gap: 2rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.about-photo {
	flex: 1 1 50%;
}

.about-photo img {
	display: block;
	width: 60%;
	height: auto;
	margin-left: auto;
	border-radius: 20px;
}

.about-intro__text {
	position: relative;
	left: -5rem;
	bottom: -3rem;
	flex: 1 1 50%;
	background: var(--color-white);
	border-radius: 20px;
	padding: 1rem 4rem;
}

.about-intro__text p {
	margin: 0;
	color: var(--color-green);
	font-size: 2rem;
	font-weight: 700;
	text-align: right;
}

@media (max-width: 880px) {
	.about-intro {
		flex-direction: column;
		gap: 0;
		padding-bottom: 2rem;
	}

	.about-photo img {
		width: 100%;
		margin: 0 auto;
	}

	.about-intro__text {
		position: relative;
		left: auto;
		right: 0;
		bottom: 2rem;
		width: 90%;
		padding: 0.5rem 1rem;
		font-size: 0.8rem;
	}
}

/* Costura arriba de cada bloque (excepto el primero): mismo criterio que
   .home-seam pero espejado (top en vez de bottom) porque acá el círculo
   "pertenece" al bloque de abajo, y alternando left/right según pide el
   diseño en vez de ir siempre a la izquierda. */
.about-seam {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
}

.about-seam__circle {
	position: absolute;
	top: -0.375rem;
	width: 6rem;
	height: 6rem;
	transform: translateY(-50%);
	border-radius: 100%;
	border: 0.75rem solid var(--color-white);
}

.about-seam__circle--left {
	left: 1.25rem;
}

.about-seam__circle--right {
	right: 1.25rem;
}

.about-seam__circle--2 {
	background: #fff9ea;
}

.about-seam__circle--3 {
	background: #fff4d6;
}

.about-seam__circle--4 {
	background: #ffeec1;
}

.about-seam__circle--5 {
	background: #ffe8ac;
}

.about-seam__circle--6 {
	background: #ffe398;
}

/* ==========================================================================
   Página "Focusing"
   Mismos colores de fondo que los bloques 4, 5 y 6 de "Sobre mí".
   ========================================================================== */
.focusing-block {
	position: relative;
	width: 100%;
	border-top: 0.75rem solid var(--color-white);
}

.focusing-block--1 {
	border-top: none;
	background: #ffffff;
}

.focusing-block--2 {
	background: #ffeec1;
}

.focusing-block--3 {
	background: #ffe8ac;
}

.focusing-block--4 {
	background: #ffe398;
}

.focusing-block__inner {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.focusing-block__inner h2,
.focusing-block__inner h3 {
	color: var(--color-green);
}

/* Acá las imágenes van sin el marco de color que usamos en el blog y en
   las páginas estándar: solo un poco de aire arriba/abajo. Se excluyen
   las imágenes alignleft/alignright (insertadas con el editor estándar
   dentro del texto) para no pisar sus márgenes de ajuste de texto. */
.focusing-block__inner img:not(.alignleft):not(.alignright) {
	display: block;
	height: auto;
	margin-top: 1.5rem;
	margin-bottom: 2.5rem;
}

/* La imagen del bloque 1 ocupa todo el ancho del contenedor. */
.focusing-block--1 .focusing-block__inner img {
	width: 100%;
	margin-top: 0;
}

/* Botones de "Servicios de Focusing que ofrezco", en el bloque 2. */
.focusing-services {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.focusing-services__btn {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	border-radius: 10px;
	background: var(--color-gold-dark);
	color: var(--color-gray-dark);
	text-decoration: none;
}

.focusing-services__btn:hover,
.focusing-services__btn:focus {
	background: #ffe8ac;
	text-decoration: none;
}

@media (max-width: 880px) {
	.focusing-services {
		flex-direction: column;
		gap: 0.3rem;
	}

	.focusing-services__btn {
		width: 100%;
		height: 3rem;
	}
}

.focusing-seam {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
}

.focusing-seam__circle {
	position: absolute;
	top: -0.375rem;
	left: 1.25rem;
	width: 6rem;
	height: 6rem;
	transform: translateY(-50%);
	border-radius: 100%;
	border: 0.75rem solid var(--color-white);
}

.focusing-seam__circle--2 {
	background: #ffeec1;
}

.focusing-seam__circle--3 {
	background: #ffe8ac;
}

.focusing-seam__circle--4 {
	background: #ffe398;
}

/* Bloque "consulta en Madrid" de Psicoterapia en Madrid: 2 fotos
   apiladas a un lado y el texto al otro, en fila (columna en mobile). */
.psico-split {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	align-items: flex-start;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.psico-split__images {
	width: 40%;
}
.psico-split__text {
	width: 60%;
}

.psico-split__images {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Mismo marco decorativo (fondo crema + padding + esquinas redondeadas)
   que usamos para imágenes sueltas a ancho completo en el blog y en las
   páginas estándar (.page-content img, .blog-single__content img). El
   width: 100% pisa el width="200" que traen las imágenes por HTML,
   para que ocupen todo el ancho de la columna en vez de su tamaño
   original. */
.psico-split__images img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 20px;
	background: var(--color-gold-dark);
	border-radius: 10px;
}

/* El espaciado entre las 2 fotos lo maneja el gap de .psico-split__images
   de arriba; acá se anula el margin-top/margin-bottom que les llega de
   ".focusing-block__inner img:not(.alignleft):not(.alignright)" (mismo
   nivel de especificidad, pero declarado después para que gane), que si
   no sumaba 1.5rem + 2.5rem entre las dos imágenes. */
.focusing-block__inner .psico-split .psico-split__images img {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 880px) {
	.psico-split {
		flex-direction: column;
	}

	.psico-split__images,
	.psico-split__text {
		width: 100%;
		min-width: 100%
	}
}

/* ==========================================================================
   Página "Mis publicaciones" (CPT "publicacion")
   ========================================================================== */
.publicaciones-page {
	padding-top: 3rem;
	padding-bottom: 5rem;
}

.publicaciones-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
}

.publicacion-card {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 2.5rem 1.5rem 3rem;
	border-bottom: 1px solid var(--color-gray-light);
	background: var(--color-cream);
	border-radius: 10px;
}

.publicacion-card:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* Circulito decorativo (mismo criterio que .focusing-seam__circle,
   .about-seam__circle, etc.) entre cada publicación y la siguiente. */
.publicacion-card:not(:last-child)::after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: -0.375rem;
	right: 2.25rem;
	width: 5rem;
	height: 5rem;
	transform: translateY(50%);
	border-radius: 999px;
	background: var(--color-cream);
	border: 0.75rem solid var(--color-white);
}

.publicacion-card__media {
	flex: 0 0 auto;
	width: 300px;
}

.publicacion-card__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.publicacion-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.publicacion-card__title {
	margin: 0 0 0.25rem;
	color: var(--color-green);
	font-size: 1.6rem;
}

.publicacion-card__byline {
	margin: 0 0 0.75rem;
	color: var(--color-green);
	font-weight: 500;
}

.publicacion-card__desc {
	margin-bottom: 1rem;
}

.publicacion-card__desc p {
	margin: 0 0 1rem;
}

.publicacion-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.publicacion-card__btn {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-text);
	text-decoration: none;
}

.publicacion-card__btn:hover,
.publicacion-card__btn:focus {
	background: var(--color-gold-dark);
	text-decoration: none;
}

@media (max-width: 880px) {
	.publicacion-card {
		flex-direction: column;
	}

	.publicacion-card__media {
		width: 100%;
	}
}