/* =============================================================
   CCLatam — components.css
   Piezas reutilizables: tarjetas de noticia, ranking, tags, spec
   box, byline, anuncios AdSense, modal de búsqueda, menú móvil,
   footer, formularios y comentarios.
   ============================================================= */

/* -------------------------------------------------------------
   IMAGEN CON FALLBACK (cclatam_thumb() en inc/template-tags.php)
   ------------------------------------------------------------- */

.cclatam-thumb-fallback {
	background: linear-gradient(135deg, var(--c1, #3a3a3a), var(--c2, #101010));
}

.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------
   TARJETA DE NOTICIA (template-parts/post-card.php)
   ------------------------------------------------------------- */

.news-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-100);
}

.news-thumb-link {
	flex: 0 0 78px;
	width: 78px;
	height: 78px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	position: relative;
}

.news-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.news-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0; /* evita que un título largo empuje el ancho del flex item */
}

.news-body .cat-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 3px;
}

.news-body h4 {
	font-size: 13.5px;
	line-height: 1.32;
	font-weight: 700;
	color: var(--black);
}

.news-body .date {
	font-size: 11px;
	color: var(--grey-400);
	margin-top: 6px;
}

.load-more {
	display: block;
	text-align: center;
	margin: 14px 0 4px 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--black);
	padding: 11px;
	border: 1.4px solid var(--grey-200);
	border-radius: 10px;
}

/* -------------------------------------------------------------
   LO MÁS VISTO (ranking numerado)
   ------------------------------------------------------------- */

.ranked {
	padding: 2px 0 4px 0;
}

.ranked-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-100);
}

.ranked-num {
	font-size: 23px;
	font-weight: 800;
	font-style: italic;
	color: var(--grey-200);
	width: 28px;
	flex-shrink: 0;
}

.ranked-item.top .ranked-num {
	color: var(--red);
}

.ranked-body h4 {
	font-size: 13px;
	line-height: 1.35;
	font-weight: 700;
}

.ranked-body .sub {
	font-size: 10.5px;
	color: var(--grey-400);
	margin-top: 4px;
}

/* -------------------------------------------------------------
   TAGS (pills)
   ------------------------------------------------------------- */

.tags-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 2px 0 6px 0;
}

.tag-pill {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--grey-600);
	background: var(--grey-100);
	padding: 7px 13px;
	border-radius: 20px;
}

/* -------------------------------------------------------------
   ARTÍCULO — categoría, byline, cita, ficha técnica
   ------------------------------------------------------------- */

.cat-pill-solo {
	display: inline-block;
	background: var(--red);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 10px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.byline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 14px 0;
}

.avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--black);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.byline .who {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--black);
}

.byline .when {
	font-size: 11px;
	color: var(--grey-400);
	margin-top: 1px;
}

.byline .share-ico {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

.byline .share-ico svg {
	width: 18px;
	height: 18px;
}

.byline .share-ico [aria-pressed="true"] {
	color: var(--red);
}

.byline .share-ico [data-copied="true"]::after {
	content: "✓";
	margin-left: 4px;
	color: var(--red);
	font-weight: 700;
}

.spec-box {
	margin: 6px 14px 20px 14px;
	border: 1px solid var(--grey-200);
	border-radius: 12px;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.spec-box {
		margin: 6px 0 20px 0;
		max-width: 680px;
	}
}

.spec-box h3 {
	background: var(--grey-100);
	font-size: 12.5px;
	font-weight: 800;
	padding: 10px 14px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--black);
}

.spec-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	font-size: 12.8px;
	border-top: 1px solid var(--grey-100);
}

.spec-row .k {
	color: var(--grey-600);
	font-weight: 600;
}

.spec-row .v {
	color: var(--black);
	font-weight: 700;
	text-align: right;
}

.tags-wrap {
	padding: 4px 14px 4px 14px;
}

/* Los tags dentro de .article-body (párrafo/lista) no llevan el padding
   lateral extra, ya que article-body ya trae su propio padding. */
.article-body .tags-wrap {
	padding: 4px 0;
}

/* -------------------------------------------------------------
   BOTÓN CTA "Suscríbete" (visible solo en desktop, ver layout.css)
   ------------------------------------------------------------- */

/* Estilos base ya definidos en layout.css junto al header */

/* -------------------------------------------------------------
   CAJA DE AUTOR (template-parts/author-box.php)
   ------------------------------------------------------------- */

.author-box {
	display: flex;
	gap: 14px;
	margin: 22px 14px 4px 14px;
	padding: 18px;
	background: var(--grey-100);
	border-radius: 14px;
}

.author-box-avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: block;
}

.author-box-body {
	flex: 1;
	min-width: 0;
}

.author-box-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--grey-400);
	margin-bottom: 2px;
}

.author-box-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--black);
}

.author-box-bio {
	font-size: 12.8px;
	line-height: 1.55;
	color: var(--grey-600);
	margin-top: 6px;
}

.author-box-social {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.author-box-social a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--grey-200);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--grey-600);
}

.author-box-social a:hover {
	color: var(--red);
	border-color: var(--red);
}

.author-box-social svg {
	width: 15px;
	height: 15px;
}

@media (min-width: 1024px) {
	.author-box {
		margin: 26px 0 4px 0;
		max-width: 680px;
		padding: 22px;
	}

	.author-box-avatar img {
		width: 76px;
		height: 76px;
	}

	.author-box-name {
		font-size: 16px;
	}

	.author-box-bio {
		font-size: 13.5px;
	}
}

/* -------------------------------------------------------------
   ANUNCIOS (Google AdSense) — placeholders y contenedores reales
   ------------------------------------------------------------- */

.ad-slot {
	margin: 18px 14px;
	border: 1.5px dashed #cfcfcf;
	background: #fafafa;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px;
	min-height: 100px;
}

.ad-slot .eyebrow {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #9a9a9a;
	margin-bottom: 5px;
}

.ad-slot .unit-name {
	font-size: 12px;
	font-weight: 700;
	color: #6b6b6b;
}

.ad-slot .dims {
	font-size: 10.5px;
	color: #9a9a9a;
	margin-top: 3px;
}

.ad-slot--leaderboard {
	min-height: 100px;
}

.ad-slot--top {
	min-height: 64px;
	margin-top: 0;
}

.ad-slot--square {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	min-height: 250px;
}

.ad-slot--skyscraper {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	min-height: 600px;
	display: none;
}

.ad-slot--infeed {
	margin: 12px 0;
	min-height: 78px;
}

.ad-slot--inarticle {
	min-height: 250px;
	max-width: 336px;
	margin-left: auto;
	margin-right: auto;
}

/* Anuncio nativo in-feed (misma forma que .news-item, ver cclatam_ad_infeed()) */
.news-item.ad-infeed {
	align-items: center;
}

.news-item.ad-infeed .news-thumb-link {
	background: #eeeeee;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #b5b5b5;
	letter-spacing: .04em;
}

.news-item.ad-infeed .cat-label {
	color: #9a9a9a;
}

/* Contenedores del código REAL de AdSense (una vez configurado en el
   Customizer) — mismo espaciado que los placeholders para que el salto
   de "placeholder" a "anuncio real" no mueva el layout. */
.ad-slot-live {
	margin: 18px 14px;
	text-align: center;
	overflow: hidden;
}

.ad-slot-live--home_sidebar_square,
.ad-slot-live--article_sidebar_square,
.ad-slot-live--home_sidebar_sky,
.ad-slot-live--article_sidebar_sky {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.ad-infeed-live {
	margin: 12px 14px;
}

@media (min-width: 1024px) {
	.ad-slot {
		margin: 24px 0;
	}

	.ad-slot-live {
		margin: 24px 0;
	}

	.ad-slot--leaderboard {
		min-height: 130px;
	}

	.ad-slot--top {
		min-height: 90px;
		margin-top: 0;
	}

	.ad-slot--skyscraper {
		display: flex;
	}

	.layout-grid .ad-slot--square,
	.layout-grid .ad-slot--skyscraper,
	.article-side .ad-slot--square,
	.article-side .ad-slot--skyscraper {
		margin-left: 0;
		margin-right: 0;
	}

	.ad-slot--inarticle {
		max-width: 100%;
	}
}

/* -------------------------------------------------------------
   MODAL DE BÚSQUEDA (off-canvas fullscreen)
   ------------------------------------------------------------- */

.search-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(17, 17, 17, .5);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.search-modal[hidden] {
	display: none;
}

.search-modal-inner {
	background: #fff;
	width: 100%;
	max-width: 640px;
	margin-top: 0;
	padding: 20px 14px;
	position: relative;
	border-radius: 0 0 var(--radius) var(--radius);
}

@media (min-width: 1024px) {
	.search-modal {
		align-items: flex-start;
		padding-top: 90px;
	}

	.search-modal-inner {
		border-radius: var(--radius);
		padding: 28px;
	}
}

.search-modal .js-close-search {
	position: absolute;
	top: 14px;
	right: 14px;
}

.search-modal .js-close-search svg {
	width: 20px;
	height: 20px;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	border-bottom: 2px solid var(--black);
	padding-bottom: 8px;
}

.search-field {
	flex: 1;
	border: none;
	outline: none;
	font-size: 16px;
	color: var(--black);
}

.search-field::placeholder {
	color: var(--grey-400);
}

.search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-submit svg {
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------------
   MENÚ MÓVIL (off-canvas)
   ------------------------------------------------------------- */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(17, 17, 17, .5);
	display: flex;
	justify-content: flex-end;
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu-inner {
	background: #fff;
	width: 80%;
	max-width: 320px;
	height: 100%;
	padding: 20px 18px;
	position: relative;
	overflow-y: auto;
}

.mobile-menu .js-close-menu {
	margin-bottom: 20px;
}

.mobile-menu .js-close-menu svg {
	width: 20px;
	height: 20px;
}

.mobile-menu nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-menu nav a {
	font-size: 15px;
	font-weight: 700;
	padding: 12px 4px;
	border-bottom: 1px solid var(--grey-100);
	color: var(--black);
}

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */

.site-footer {
	margin-top: 26px;
	padding: 22px 14px 30px 14px;
	background: var(--grey-900);
	color: rgba(255, 255, 255, .6);
	text-align: center;
	font-size: 10.5px;
	line-height: 1.6;
}

.footer-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.footer-logo img,
.footer-logo .custom-logo {
	height: 20px;
	width: auto;
	filter: brightness(0) invert(1); /* fuerza blanco, sin necesitar un segundo archivo de logo */
}

.footer-logo-text {
	font-weight: 800;
	font-size: 15px;
	color: #fff;
}

.footer-tagline {
	margin-bottom: 4px;
}

.footer-nav {
	margin-top: 14px;
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-nav a {
	color: rgba(255, 255, 255, .75);
	font-size: 11px;
	font-weight: 600;
}

/* -------------------------------------------------------------
   COMENTARIOS (wp_list_comments / comment_form nativos de WP)
   ------------------------------------------------------------- */

.article-comments {
	padding: 20px 14px 0 14px;
	max-width: 680px;
}

@media (min-width: 1024px) {
	.article-comments {
		padding: 20px 40px 0 40px;
		margin: 0 auto;
	}
}

.article-comments .comment-list {
	margin: 16px 0;
}

.article-comments .comment-list li {
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-100);
	font-size: 13.5px;
}

.article-comments .comment-form input[type="text"],
.article-comments .comment-form input[type="email"],
.article-comments .comment-form input[type="url"],
.article-comments .comment-form textarea {
	width: 100%;
	border: 1.4px solid var(--grey-200);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
	font-size: 14px;
}

.article-comments .comment-form textarea {
	min-height: 110px;
	resize: vertical;
}

.article-comments .form-submit input {
	background: var(--black);
	color: #fff;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 8px;
}

/* -------------------------------------------------------------
   BOTÓN "VER GALERÍA" sobre la imagen destacada del artículo
   ------------------------------------------------------------- */

.lightbox-trigger {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	background: rgba(17, 17, 17, .68);
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 8px 14px 8px 11px;
	font-size: 12px;
	font-weight: 700;
}

.lightbox-trigger svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* -------------------------------------------------------------
   LIGHTBOX — visor de fotos a pantalla completa
   Estructura: franja de ad (desktop) → barra con contador/cerrar →
   cuerpo (flechas + imagen + ad lateral en desktop) → miniaturas.
   Los anuncios están siempre lejos de los controles de navegación
   y no aparecen en mobile (pantalla muy angosta para separarlos
   con seguridad — ver inc/adsense.php).
   ------------------------------------------------------------- */

.cclatam-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--black);
	display: flex;
	flex-direction: column;
}

.cclatam-lightbox[hidden] {
	display: none;
}

.lightbox-ad {
	flex-shrink: 0;
}

.lightbox-ad--top,
.lightbox-ad--side {
	display: none; /* Sin ads en mobile dentro del visor — ver nota arriba. */
}

.lightbox-ad--top .ad-slot,
.lightbox-ad--top .ad-slot-live {
	margin: 10px auto 0 auto;
	max-width: 728px;
}

.lightbox-topbar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 14px 16px;
	color: #fff;
}

.lightbox-counter {
	font-size: 13px;
	font-weight: 700;
	color: var(--grey-200);
	letter-spacing: .02em;
}

.lightbox-topbar .icon-btn {
	color: #fff;
}

/*
 * A diferencia de las flechas (.lightbox-nav svg, con tamaño fijo), este
 * ícono no tenía un width/height explícito y dependía de que el navegador
 * lo calculara solo a partir del viewBox — Safari/iOS a veces no lo
 * resuelve bien y el ícono puede no mostrarse aunque el botón (su área
 * clickeable) siga ahí. Se fija el tamaño para que sea consistente en
 * cualquier navegador.
 */
.lightbox-topbar .icon-btn svg {
	width: 20px;
	height: 20px;
}

.lightbox-body {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding: 0 16px;
}

.lightbox-stage {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.lightbox-stage img {
	max-width: 100%;
	max-height: 68vh;
	/* dvh = "viewport visible de verdad" en Safari/Chrome móvil (sin la
	   barra de direcciones). Navegadores que no la soportan ignoran esta
	   línea y se quedan con el 68vh de arriba — no rompe nada. */
	max-height: 68dvh;
	object-fit: contain;
	border-radius: 4px;
}

.lightbox-caption {
	color: var(--grey-200);
	font-size: 12.5px;
	font-style: italic;
	text-align: center;
	margin-top: 12px;
	padding: 0 24px;
	max-width: 640px;
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	flex-shrink: 0;
}

.lightbox-prev {
	left: 4px;
}

.lightbox-next {
	right: 4px;
}

.lightbox-nav svg {
	width: 20px;
	height: 20px;
}

.lightbox-ad--side .ad-slot,
.lightbox-ad--side .ad-slot-live {
	margin: 0;
}

.lightbox-thumbs {
	flex-shrink: 0;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 14px 16px;
	-webkit-overflow-scrolling: touch;
}

.lightbox-thumb {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid transparent;
	opacity: .55;
	background: var(--grey-900);
}

.lightbox-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lightbox-thumb.is-active {
	opacity: 1;
	border-color: var(--red);
}

@media (min-width: 1024px) {
	.lightbox-ad--top,
	.lightbox-ad--side {
		display: block;
	}

	.lightbox-topbar {
		padding: 18px 28px;
	}

	.lightbox-body {
		padding: 0 28px;
		gap: 56px;
	}

	.lightbox-ad--side {
		width: 300px;
		flex-shrink: 0;
	}

	.lightbox-stage img {
		max-height: 74vh;
		max-height: 74dvh;
	}

	.lightbox-caption {
		padding: 0 50px;
	}

	.lightbox-nav {
		width: 46px;
		height: 46px;
	}

	.lightbox-prev {
		left: 14px;
	}

	.lightbox-next {
		right: 14px;
	}

	.lightbox-thumbs {
		padding: 16px 28px 20px 28px;
		justify-content: center;
	}

	.lightbox-thumb {
		width: 64px;
		height: 64px;
	}
}

/* -------------------------------------------------------------
   GALERÍAS INDEPENDIENTES EN EL CUERPO DEL ARTÍCULO
   (bloque de Galería nativo de WordPress, ver inc/content-gallery.php)
   ------------------------------------------------------------- */

.content-gallery {
	margin: 24px 0;
}

/*
 * auto-fit (no repeat(N, 1fr) fijo): el navegador solo crea tantas
 * columnas como fotos haya. Con repeat(N, 1fr) fijo, una galería con
 * menos fotos que columnas (ej. 3 fotos en una fila de 4) dejaba una
 * columna vacía y las miniaturas quedaban desalineadas a la izquierda
 * en vez de ocupar todo el ancho.
 */
.content-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 8px;
}

.content-gallery-item {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--grey-100);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.content-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .2s ease;
}

.content-gallery-item:hover img {
	transform: scale(1.04);
}

.content-gallery-item:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

/*
 * Galería con una sola foto: a todo el ancho, sin recortar a 4:3.
 * El selector repite la clase a propósito (.content-gallery-grid.content-
 * gallery-grid--solo) para que gane siempre a las reglas de columnas de
 * más abajo (@media min-width:640px/1024px), que tienen la misma
 * "fuerza" (especificidad) y si no, ganarían ellas por venir después en
 * el archivo — eso fue justo el bug que dejaba la foto suelta chica en
 * vez de a todo el ancho.
 */
.content-gallery--single .content-gallery-grid,
.content-gallery-grid.content-gallery-grid--solo {
	grid-template-columns: 1fr;
}

.content-gallery--single .content-gallery-item,
.content-gallery-grid--solo .content-gallery-item {
	aspect-ratio: auto;
}

.content-gallery--single .content-gallery-item img,
.content-gallery-grid--solo .content-gallery-item img {
	height: auto;
	object-fit: initial;
}

/*
 * Galería de exactamente 3 fotos (un bloque "Exterior"/"Interior" suelto):
 * en escritorio, una sola fila de 3 columnas parejas; en mobile, el
 * mosaico asimétrico (una grande + dos apiladas) se ve mejor que 3
 * cuadros chicos. Ver más abajo el mosaico "de verdad" (.content-gallery-
 * grid--mosaic3), que es el mismo diseño pero se usa SIEMPRE (no solo en
 * mobile) para los bloques de 3 dentro de una galería de 4+ fotos.
 */
@media (min-width: 640px) {
	.content-gallery--trio .content-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}

/*
 * Mosaico de 3 fotos: la primera grande a la derecha (ocupa las dos
 * filas) y las otras dos apiladas y cuadradas a la izquierda. Misma idea
 * que usa Deagencia. Se usa: (a) en la galería suelta de 3 fotos, solo en
 * mobile (ver media query de abajo), y (b) en cada bloque de 3 dentro de
 * una galería de 4+ fotos, siempre — clase ".content-gallery-grid--mosaic3".
 *
 * Importante: el bloque completo tiene un aspect-ratio fijo (le da una
 * altura definida) y las filas son "1fr 1fr" de esa altura — así las 2
 * filas siempre miden lo mismo. Sin esto, el navegador intenta calcular
 * el alto de las filas a partir del contenido, y como la foto grande
 * tiene una proporción distinta a las dos cuadradas, el cálculo sale
 * inconsistente entre navegadores (a veces queda un hueco vacío, a
 * veces la foto grande sale desproporcionada).
 */
.content-gallery-grid.content-gallery-grid--mosaic3 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 4 / 3;
	gap: 8px;
}

.content-gallery-grid--mosaic3 .content-gallery-item {
	aspect-ratio: auto;
	height: 100%;
}

.content-gallery-grid--mosaic3 .content-gallery-item:nth-child(1) {
	grid-column: 2;
	grid-row: 1 / 3;
}

.content-gallery-grid--mosaic3 .content-gallery-item:nth-child(2) {
	grid-column: 1;
	grid-row: 1;
}

.content-gallery-grid--mosaic3 .content-gallery-item:nth-child(3) {
	grid-column: 1;
	grid-row: 2;
}

@media (max-width: 639.98px) {
	.content-gallery--trio .content-gallery-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		aspect-ratio: 4 / 3;
		gap: 8px;
	}

	.content-gallery--trio .content-gallery-item {
		aspect-ratio: auto;
		height: 100%;
	}

	.content-gallery--trio .content-gallery-item:nth-child(1) {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.content-gallery--trio .content-gallery-item:nth-child(2) {
		grid-column: 1;
		grid-row: 1;
	}

	.content-gallery--trio .content-gallery-item:nth-child(3) {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Par parejo (sobrante de 2 fotos al final de un mosaico de 4+). */
.content-gallery-grid.content-gallery-grid--pair {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/*
 * Galería de 4+ fotos: varios bloques (mosaicos de 3, o el sobrante de
 * 1/2 al final) apilados con espacio entre ellos.
 */
.content-gallery--mosaic .content-gallery-grid + .content-gallery-grid {
	margin-top: 8px;
}

/*
 * Mobile: una foto por fila, a todo el ancho (como la imagen destacada),
 * en vez de la grilla de miniaturas — en una pantalla angosta, 2-3
 * columnas quedan diminutas y, si el total no es múltiplo de la grilla,
 * la última fila queda incompleta y pegada a la izquierda en vez de
 * centrada. No aplica a los mosaicos de 3 (.content-gallery--trio,
 * .content-gallery-grid--mosaic3) ni al sobrante parejo de 2
 * (.content-gallery-grid--pair), que ya tienen su propio diseño mobile.
 */
@media (max-width: 639.98px) {
	.content-gallery-grid:not(.content-gallery--trio .content-gallery-grid):not(.content-gallery-grid--mosaic3):not(.content-gallery-grid--pair) {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.content-gallery-grid:not(.content-gallery--trio .content-gallery-grid):not(.content-gallery-grid--mosaic3):not(.content-gallery-grid--pair) .content-gallery-item {
		aspect-ratio: auto;
	}

	.content-gallery-grid:not(.content-gallery--trio .content-gallery-grid):not(.content-gallery-grid--mosaic3):not(.content-gallery-grid--pair) .content-gallery-item img {
		height: auto;
		object-fit: initial;
	}
}

@media (min-width: 640px) {
	.content-gallery-grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 10px;
	}
}

@media (min-width: 1024px) {
	.content-gallery-grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 12px;
	}
}

/* -------------------------------------------------------------
   FORMULARIO DE CONTACTO (template-contact.php)
   ------------------------------------------------------------- */

.contact-form {
	max-width: 480px;
	margin-top: 20px;
}

.contact-form .form-field {
	margin-bottom: 16px;
}

.contact-form label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--grey-600);
	margin-bottom: 6px;
}

.contact-form .req {
	color: var(--red);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	border: 1.4px solid var(--grey-200);
	border-radius: 8px;
	padding: 11px 13px;
	font-size: 14.5px;
	font-family: inherit;
	color: var(--black);
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--black);
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
	border-color: var(--red);
}

.contact-form textarea {
	resize: vertical;
	min-height: 130px;
}

.contact-form .field-error {
	display: block;
	color: var(--red);
	font-size: 11.5px;
	font-weight: 600;
	margin-top: 5px;
}

.contact-form .form-submit-btn {
	background: var(--black);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 26px;
	border-radius: 8px;
}

/* Honeypot: invisible para personas (incluida navegación por teclado y
   lectores de pantalla), visible/rellenable para bots poco sofisticados. */
.contact-form .hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	max-width: 480px;
	margin-top: 20px;
	padding: 13px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

.form-notice--success {
	background: #e9f7ec;
	color: #1e6b30;
}

.form-notice--error {
	background: #fdecec;
	color: #a3221f;
}