/*
Theme Name:   Zox News Child
Theme URI:    https://themeforest.net/user/mvpthemes/
Description:  Zox News Child Theme
Author:       MVP Themes
Author URI:   https://themeforest.net/user/mvpthemes/portfolio
Template:     zox-news
Version:      1.1.4
License:      GNU General Public License v3 or later
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Tags:         two-columns, custom-background, custom-colors, custom-menu, featured-images, theme-options, threaded-comments, translation-ready
Text Domain:  zox-news-child
*/

/* =========================================================================
   PERSONALIZACIONES RD EN HECHOS
   Paleta: Azul #1B2E4B / #2A4872  Rojo #99250A / #D4380D  Crema #FBF7F0
   ========================================================================= */

/* Fondo de la pagina color crema */
body {
	background-color: #FBF7F0;
	}
/* El contenedor principal de contenido del tema es blanco por defecto; lo ponemos
   en crema para que TODO el fondo (no solo el body) sea del color del menu. */
#mvp-main-body-wrap {
	background: #FBF7F0;
	}

/* ============ HEADER DE DOS FRANJAS (diseno tipo mockup) ============ */

/* Franja SUPERIOR: azul oscuro de marca, linea roja arriba, logo a la izquierda */
#mvp-main-nav-top {
	background: #1B2E4B;
	border-top: 4px solid #D4380D;
	padding: 10px 0;
	}
/* --- Layout del header de dos franjas: SOLO escritorio (>=1004px).
   En movil/tablet el tema usa su header responsive con menu hamburguesa,
   asi que estas reglas (caja de 260px, posiciones absolutas) no deben aplicar. --- */
@media (min-width: 1004px) {
.mvp-nav-top-mid {
	text-align: left;
	overflow: visible;
	width: auto;
	}
.mvp-nav-logo-reg img {
	max-height: 62px;
	width: auto;
	}
/* En las noticias, el tema mete el titulo del articulo dentro del contenedor
   del logo (.mvp-drop-nav-title); con overflow:visible se desbordaba y se
   superponia sobre el header. Lo ocultamos en la franja superior. */
#mvp-main-nav-top .mvp-drop-nav-title {
	display: none !important;
	}
/* Logo a la IZQUIERDA y redes sociales a la DERECHA en la franja azul.
   El tema coloca: redes (.mvp-nav-top-left) y luego el logo (.mvp-nav-top-left-in);
   con flex row-reverse + space-between el logo va al extremo izquierdo y las redes a la derecha. */
/* El tema usa un sistema de margenes negativos (out: margin-left:-200; in: margin-left:200)
   con las redes en position:absolute; left:0. Lo neutralizamos para que el logo quede
   alineado al borde IZQUIERDO del contenedor central y las redes al borde DERECHO,
   con el MISMO margen a ambos lados. */
.mvp-nav-top-left-out {
	margin-left: 0 !important;
	float: none !important;
	width: 100% !important;
	}
/* El tema reserva 200px a la derecha (margin-right) para el buscador, que aqui
   esta oculto; eso recortaba el contenedor de las redes. Lo quitamos para que
   las redes lleguen al borde derecho del contenedor central. */
.mvp-nav-top-right-in {
	margin-right: 0 !important;
	}
.mvp-nav-top-left-in {
	margin-left: 0 !important;
	}
.mvp-nav-top-left {
	left: auto !important;
	right: 0 !important;
	top: 0 !important;
	bottom: auto !important;
	height: 62px !important;   /* altura explicita (height:100% colapsaba a 0) para el centrado vertical del wrap */
	width: 260px !important;   /* ancho fijo: iconos en una sola fila (auto colapsaba y se apilaban) */
	}
/* El wrap conserva el centrado vertical del tema (absolute top:50%, width:100%);
   solo alineamos los iconos a la DERECHA (text-align + sin float). */
.mvp-nav-top-left .mvp-nav-soc-wrap {
	text-align: right !important;
	}
.mvp-nav-top-left .mvp-nav-soc-wrap a,
.mvp-nav-top-left span.mvp-nav-soc-but {
	float: none !important;
	display: inline-block !important;
	}
/* El contenedor derecho del buscador (.mvp-nav-top-right) queda absoluto encima de
   los iconos sociales y bloqueaba el clic/hover en todos menos el primero (Instagram).
   Dejamos pasar el puntero por su zona vacia; solo el boton de busqueda sigue activo. */
.mvp-nav-top-right {
	pointer-events: none;
	}
.mvp-nav-top-right .mvp-nav-search-but {
	pointer-events: auto;
	}
}  /* fin @media (min-width: 1004px) — layout header escritorio */

/* --- Redes sociales visibles en MOVIL/TABLET (pedido del cliente: que se vean como
   en escritorio). El tema las oculta en todos los breakpoints (<1004px) con
   .mvp-nav-soc-wrap{display:none !important} y clampa la franja azul a 30px con
   #mvp-main-nav-top{height:30px !important}. Este style.css carga ANTES que
   media-queries.css, asi que ganamos por ESPECIFICIDAD (#id .clase / #id.clase).
   Los iconos van en una 2a fila centrada bajo el logo. --- */
@media (max-width: 1003px) {
	/* La franja azul crece para alojar la fila de iconos (30px logo + 6px + 30px iconos) */
	#mvp-main-nav-top.left {
		height: 66px !important;
		}
	/* El contenedor de las redes (.mvp-nav-top-left, absoluto de 200px que tambien trae la
	   hamburguesa) pasa a todo el ancho para poder centrar los iconos; pointer-events:none
	   para que su zona vacia no tape el clic del logo (misma tecnica que el buscador en pc). */
	#mvp-main-nav-top .mvp-nav-top-left {
		width: 100% !important;
		pointer-events: none;
		}
	#mvp-main-nav-top .mvp-nav-top-left .mvp-fly-but-wrap,
	#mvp-main-nav-top .mvp-nav-soc-wrap a {
		pointer-events: auto;
		}
	/* Fila de iconos debajo del logo: top:100% del alto original (30px), centrada */
	#mvp-main-nav-top .mvp-nav-soc-wrap {
		display: block !important;
		top: 100%;
		margin-top: 6px;
		height: auto;
		text-align: center;
		}
	/* Iconos compactos (mismas proporciones que usa el tema en su barra pequena) */
	#mvp-main-nav-top .mvp-nav-soc-wrap span.mvp-nav-soc-but {
		float: none;
		display: inline-block;
		font-size: 15px;
		width: 32px;
		height: 23px;
		padding-top: 7px;
		margin: 0 3px;
		}
	}

/* --- Botones de COMPARTIR de la noticia visibles en MOVIL/TABLET (pedido del cliente:
   que salgan como en escritorio). El tema los oculta (<1004px) con
   .mvp-post-soc-wrap{display:none !important} y deja solo la barrita fija de abajo.
   En escritorio son una columna en el margen izquierdo del texto; en movil ese margen
   no existe (.mvp-post-soc-out queda con margin 0), asi que el bloque pasa a FILA
   centrada arriba del cuerpo de la noticia. Ganamos por especificidad con el #id. --- */
@media (max-width: 1003px) {
	#mvp-content-wrap .mvp-post-soc-wrap {
		display: block !important;
		float: none;
		width: 100%;
		margin: 0 0 10px;
		}
	#mvp-content-wrap ul.mvp-post-soc-list {
		text-align: center;
		}
	#mvp-content-wrap ul.mvp-post-soc-list li {
		float: none;
		display: inline-block;
		margin: 0 4px 8px;
		}
	/* La barrita fija de compartir de abajo (SHARE/TWEET) era la que se veia con iconos
	   distintos y en otro orden que en escritorio; con la fila de arriba ya no hace falta. */
	#mvp-soc-mob-wrap {
		display: none !important;
		}
	}

/* Franja de MENU (inferior): crema, linea roja arriba, enlaces azul oscuro */
#mvp-main-nav-bot,
#mvp-main-nav-bot-cont {
	background: #FBF7F0;
	}
#mvp-main-nav-bot {
	border-top: 3px solid #D4380D;
	}
#mvp-nav-bot-wrap span.mvp-nav-search-but,
#mvp-nav-bot-wrap .mvp-nav-menu ul li a {
	color: #1B2E4B;
	}
#mvp-nav-bot-wrap .mvp-fly-but-wrap span,
#mvp-nav-bot-wrap .mvp-search-but-wrap span {
	background: #1B2E4B;
	}
#mvp-nav-bot-wrap .mvp-nav-menu ul li.menu-item-has-children a:after {
	border-color: #1B2E4B transparent transparent transparent;
	}
/* divisores verticales entre items del menu */
#mvp-nav-bot-wrap .mvp-nav-menu > ul > li {
	border-left: 1px solid rgba(27,46,75,.15);
	}
#mvp-nav-bot-wrap .mvp-nav-menu > ul > li:first-child {
	border-left: none;
	}
/* subrayado rojo en hover y en el item activo (sustituye el verde del tema) */
.mvp-nav-menu ul li:hover > a {
	border-bottom-color: #D4380D;
	}
#mvp-main-nav-bot .mvp-nav-menu ul li.current-menu-item > a,
#mvp-main-nav-bot .mvp-nav-menu ul li.current-menu-parent > a,
#mvp-main-nav-bot .mvp-nav-menu ul li.current_page_item > a {
	border-bottom: 4px solid #D4380D;
	color: #D4380D;
	}

/* Estado FIJO al hacer scroll (barra compacta mvp-nav-small): crema */
#mvp-main-nav-small-cont {
	background: #FBF7F0;
	border-bottom: 3px solid #1B2E4B;
	}
#mvp-main-nav-small span.mvp-nav-search-but,
#mvp-main-nav-small .mvp-nav-menu ul li a {
	color: #1B2E4B;
	}
#mvp-main-nav-small .mvp-nav-menu ul li.menu-item-has-children a:after {
	border-color: #1B2E4B transparent transparent transparent;
	}
#mvp-main-nav-small .mvp-fly-but-wrap span,
#mvp-main-nav-small .mvp-search-but-wrap span {
	background: #1B2E4B;
	}

/* Etiquetas de categoria en rojo de marca */
ul.mvp-feat1-list-buts li.active span.mvp-feat1-list-but,
span.mvp-post-cat {
	background: #D4380D;
	}

/* Titulos de secciones y cabeceras en azul oscuro */
span.mvp-widget-home-title,
span.mvp-feat1-pop-head,
span.mvp-page-head {
	background: #1B2E4B;
	}

/* --- TODAS las secciones feat2 del home (El País, Política, Opiniones, Regionales,
   Deporte, Justicia): panel AZUL unico detras de las dos primeras columnas (nota
   grande + notas apiladas) y panel ROJO en la lista de la derecha. El azul/rojo se
   ven entre columnas y detras del texto; las fotos van encima. En las columnas 2 y 3
   aclaramos titulo, categoria y fecha para legibilidad. --- */
.mvp_home_feat2_widget .mvp-widget-feat2-main {
	background: #1B2E4B;
	padding: 18px;
	box-sizing: border-box;
	}
/* Las columnas pasan a % (sumando <100%) y SIN margenes propios, para que quepan
   dentro del panel con su padding azul independientemente de si el tema las alinea
   a izquierda o derecha (las secciones pares van espejadas: la nota grande flota a
   la derecha). Con margenes del tema + padding se desbordaban a dos filas. */
.mvp_home_feat2_widget .mvp-widget-feat2-left {
	width: 63%;
	margin: 0;
	box-sizing: border-box;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-right {
	width: 36%;
	margin: 0;
	box-sizing: border-box;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-main img {
	max-width: 100%;
	height: auto;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-right-text {
	padding: 10px 12px 14px;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-right h2,
.mvp_home_feat2_widget .mvp-widget-feat2-right h2 a {
	color: #fff;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-right .mvp-cd-cat,
.mvp_home_feat2_widget .mvp-widget-feat2-right .mvp-cd-date {
	color: #cfd6e4;
	}
/* Columna derecha (lista): mismo marco que el panel azul, pero en ROJO de marca. */
.mvp_home_feat2_widget .mvp-widget-feat2-side {
	background: #99250A;
	padding: 18px;
	box-sizing: border-box;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-side h2,
.mvp_home_feat2_widget .mvp-widget-feat2-side h2 a {
	color: #fff;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-side .mvp-cd-cat,
.mvp_home_feat2_widget .mvp-widget-feat2-side .mvp-cd-date {
	color: #ffe2d8;
	}
.mvp_home_feat2_widget .mvp-widget-feat2-side .mvp-widget-feat2-side-more-but {
	color: #fff !important;
	}


/* --- Detalle de noticia: la entradilla bajo el titulo es el .mvp-post-excerpt, que
   muestra el SUBTITULO manual si existe (inyectado server-side via get_the_excerpt) o,
   en su defecto, el extracto. Estilo gris como el diseno de referencia. --- */
.single .mvp-post-excerpt {
	margin-top: 16px;
	}

/* --- Portada (hero superior #mvp-feat6-wrap): el tema construye la altura a partir
   de la IMAGEN del post destacado, y el texto va superpuesto (position:absolute). Si
   el post mas reciente no tiene imagen destacada, el bloque colapsa a 0 y la portada
   desaparece. Red de seguridad: altura minima + fondo azul de marca para que SIEMPRE
   se vea el contenido aunque falte la imagen (con imagen, esta cubre el azul). --- */
#mvp-feat6-wrap,
#mvp-feat6-main {
	min-height: 440px;
	}
#mvp-feat6-wrap {
	background: #1B2E4B;
	}
#mvp-feat6-text h3,
#mvp-feat6-text h3 span {
	color: #fff;
	}

/* Acentos de texto en rojo oscuro */
.mvp-widget-feat2-side-more-but,
.woocommerce .star-rating span:before,
span.mvp-prev-next-label,
.mvp-cat-date-wrap .sticky {
	color: #99250A !important;
	}

.woocommerce span.onsale {
	background-color: #D4380D;
	}

/* --- Fecha de la noticia: "Publicado el [fecha]" sin la hora ni el "hace X".
   El marcado es: <p>Published</p> <span>X ago</span> <p>on</p> <span class="updated">FECHA</span>.
   'Published' se traduce a 'Publicado el' (gettext) y aqui ocultamos el "ago" y el "on". --- */
.single .mvp-author-info-date span.mvp-post-date:not(.updated) {
	display: none;   /* "3 semanas ago" */
	}
.single .mvp-author-info-date p:nth-of-type(2) {
	display: none;   /* "on" */
	}

/* --- "House ad": los espacios de anuncio vacios se convierten (por JS) en un banner
   que invita a anunciarse, con fondo de marca. Indica el espacio, "Anunciate aqui" y
   debajo "RD en Hechos". Al colocar un anuncio real, ese espacio deja de mostrarlo. --- */
.rd-house-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	padding: 18px 14px;
	text-align: center;
	text-decoration: none;
	background: linear-gradient(135deg, #1B2E4B 0%, #2A4872 60%, #99250A 150%);
	border: 1px dashed rgba(255,255,255,0.35);
	border-radius: 6px;
	color: #fff;
	}
.rd-house-ad:hover {
	border-color: rgba(255,255,255,0.7);
	}
.rd-house-ad .rd-house-ad-top {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	}
.rd-house-ad .rd-house-ad-cta {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.1;
	margin: 5px 0 7px;
	color: #fff;
	}
.rd-house-ad .rd-house-ad-brand {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-top: 1px solid rgba(255,255,255,0.3);
	padding-top: 6px;
	color: #FBF7F0;
	}

/* --- Banners de publicidad: limitar el alto para que no dominen, aunque se suba
   una imagen grande. Imagen ideal: superior y noticia 728x90 (o 970x120),
   lateral 300x250 o 300x600. --- */
.rd-banner-superior img,
.rd-banner-seccion img,
.rd-banner-noticia img,
.rd-banner-single img {
	max-height: 130px;
	width: auto;
	max-width: 100%;
	height: auto;
	}
.rd-banner-real img {
	max-width: 100%;
	height: auto;
	}

/* --- Banda "Lo real importa" bajo el header (solo home): cinta/headline que
   desplaza los titulos de las ultimas noticias. El lema queda fijo a la izquierda
   y los titulares pasan de derecha a izquierda; al pasar el mouse se pausa. --- */
.rd-ticker {
	background: linear-gradient(135deg, #1B2E4B 0%, #2A4872 100%);
	border-top: 3px solid #D4380D;
	margin: 0 0 18px;
	clear: both;
	overflow: hidden;
	}
.rd-ticker .rd-ticker-in {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	}
.rd-ticker .rd-ticker-lema {
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	padding: 12px 16px 12px 0;
	border-right: 2px solid #D4380D;
	flex: 0 0 auto;
	}
.rd-ticker .rd-ticker-viewport {
	overflow: hidden;
	flex: 1 1 auto;
	}
.rd-ticker .rd-ticker-track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: rd-ticker-scroll 60s linear infinite;
	}
.rd-ticker:hover .rd-ticker-track {
	animation-play-state: paused;
	}
.rd-ticker .rd-ticker-item {
	color: #FBF7F0;
	font-size: 15px;
	line-height: 1.4;
	padding: 12px 0;
	margin-right: 28px;
	text-decoration: none;
	white-space: nowrap;
	}
.rd-ticker .rd-ticker-item:before {
	content: "\2022";
	color: #D4380D;
	margin-right: 28px;
	}
.rd-ticker .rd-ticker-item:hover {
	color: #fff;
	text-decoration: underline;
	}
@keyframes rd-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
	}

/* --- Bloque destacado del home (feat2): las 2 noticias apiladas de la columna
   lateral tienen alto fijo (300px c/u, con imagen de 192px); los titulos largos
   (4 lineas) se desbordaban y la ultima linea se cortaba invadiendo la seccion
   siguiente. Los limitamos a 3 lineas para que quepan completos en su espacio. --- */
.mvp-widget-feat2-right-cont {
	overflow: hidden;
	}
.mvp-widget-feat2-right-text h2 {
	font-size: 18px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

/* Boton de compartir por WhatsApp en la noticia (mismo formato circular que los
   demas; el icono y la forma los hereda de ul.mvp-post-soc-list li). */
ul.mvp-post-soc-list li.mvp-post-soc-whats {
	background: #25D366;
	}

/* Quitar los botones de compartir por Pinterest y por correo (solo FB, X, WhatsApp).
   Hay DOS barras de compartir: la flotante (.mvp-post-soc-*) y la movil/inferior
   (.mvp-soc-mob-*); se ocultan Pinterest y correo en ambas. */
ul.mvp-post-soc-list li.mvp-post-soc-pin,
ul.mvp-post-soc-list li.mvp-post-soc-email,
ul.mvp-soc-mob-list li.mvp-soc-mob-pin,
ul.mvp-soc-mob-list li.mvp-soc-mob-email {
	display: none !important;
	}

/* --- Pie de foto / "footer" de las imagenes del contenido: banda azulada translucida
   MONTADA sobre el borde inferior de la imagen (la foto se ve por detras), texto
   oscuro en negrita e icono de camara delante. Se activa con el campo "Leyenda"
   al insertar la imagen en la noticia. --- */
#mvp-content-main figure,
#mvp-content-main .wp-caption,
.mvp-post-add-main .wp-caption {
	margin: 0 0 22px;
	max-width: 100%;
	position: relative;
	}
#mvp-content-main figure > img,
#mvp-content-main .wp-caption > img,
.mvp-post-add-main .wp-caption > img {
	display: block;
	margin: 0;
	}
#mvp-content-main figcaption,
#mvp-content-main .wp-element-caption,
#mvp-content-main p.wp-caption-text,
.mvp-post-add-main p.wp-caption-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(27,46,75,.75);
	color: #FBF7F0 !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.5;
	padding: 10px 14px;
	margin: 0 !important;
	text-align: left;
	}
/* Icono de camara delante del pie de foto (FontAwesome ya cargado por el child). */
#mvp-content-main figcaption::before,
#mvp-content-main .wp-element-caption::before,
#mvp-content-main p.wp-caption-text::before,
.mvp-post-add-main p.wp-caption-text::before,
span.mvp-feat-caption::before {
	content: "\f030";
	font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
	font-weight: 900;
	margin-right: 8px;
	}

/* Pie de foto de la imagen DESTACADA (campo "Featured Image Caption" / mvp_photo_credit).
   Misma banda translucida montada sobre el borde inferior de la foto, con icono de
   camara, igual que los pies del contenido. Aparece solo si se escribe el texto.
   GOTCHA: el tema imprime el span como hermano de #mvp-post-feat-img (hijo directo de
   #mvp-post-content, que es "relative"), asi que el absolute lo mandaria al fondo del
   articulo. Un JS en functions.php (rd_mover_pie_foto) lo mueve dentro de la imagen;
   mientras no este dentro, se oculta. */
#mvp-post-content > span.mvp-feat-caption {
	display: none;
	}
#mvp-post-feat-img {
	position: relative;
	}
span.mvp-feat-caption {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	color: #FBF7F0 !important;
	background: rgba(27,46,75,.75);
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.5;
	padding: 9px 13px !important;
	margin: 0 !important;
	float: none !important;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left !important;
	}

/* Cuando la noticia tiene SUBTITULO manual, su entradilla (.mvp-post-excerpt, donde se
   inyecta el subtitulo) va como bajada en azul de marca, mas grande. En noticias sin
   subtitulo, el extracto queda con el gris por defecto del tema (como la referencia). */
.rd-has-subtitulo .mvp-post-excerpt,
.rd-has-subtitulo .mvp-post-excerpt p {
	font-size: 21px;
	line-height: 1.4;
	font-weight: 400;
	color: #2A4872;
	}

/* ============ PAGINA DE CONTACTO: layout dos columnas estilo mockup ============
   Izquierda: formulario. Derecha: tarjetas WhatsApp/Correo + redes (pildoras). */
.rd-contacto-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: start;
	margin: 0 0 20px;
	}
@media (max-width: 880px) {
	.rd-contacto-grid { grid-template-columns: 1fr; gap: 30px; }
	}
/* Encabezados de columna con linea de acento de marca */
.rd-contacto-h {
	font-size: 24px;
	font-weight: 800;
	color: #1B2E4B;
	margin: 0 0 16px;
	padding: 0 0 8px;
	border-bottom: 2px solid #D4380D;
	line-height: 1.2;
	}
.rd-contacto-h-soc {
	margin-top: 26px;
	font-size: 20px;
	}

/* --- Formulario (columna izquierda): limpio, sin tarjeta --- */
.rd-form-contacto {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	}
.rd-form-contacto .wpforms-field {
	padding: 0 0 18px;
	}
.rd-form-contacto .wpforms-field-label {
	font-size: 16px;
	font-weight: 700;
	color: #1B2E4B;
	margin-bottom: 7px;
	}
.rd-form-contacto .wpforms-required-label {
	color: #D4380D;
	}
.rd-form-contacto input[type="text"],
.rd-form-contacto input[type="email"],
.rd-form-contacto input[type="tel"],
.rd-form-contacto input[type="url"],
.rd-form-contacto textarea {
	width: 100%;
	border: 1px solid #d8d2c6;
	border-radius: 8px;
	padding: 13px 15px;
	font-size: 16px;
	line-height: 1.4;
	background: #fcfaf6;
	color: #1a1a1a;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s, background .15s;
	}
.rd-form-contacto input::placeholder,
.rd-form-contacto textarea::placeholder {
	color: #9a948a;
	}
.rd-form-contacto input:focus,
.rd-form-contacto textarea:focus {
	border-color: #2A4872;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(42,72,114,.12);
	outline: none;
	}
.rd-form-contacto textarea {
	min-height: 150px;
	resize: vertical;
	}
/* Boton ENVIAR MENSAJE: pildora naranja de marca */
.rd-form-contacto .wpforms-form button.wpforms-submit,
.rd-form-contacto button.wpforms-submit {
	background-color: #D4380D !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: 40px !important;
	padding: 14px 46px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(212,56,13,.28);
	transition: background-color .15s, transform .05s;
	}
.rd-form-contacto .wpforms-form button.wpforms-submit:hover,
.rd-form-contacto button.wpforms-submit:hover {
	background-color: #b32f0a !important;
	}
.rd-form-contacto .wpforms-form button.wpforms-submit:active {
	transform: translateY(1px);
	}

/* --- Columna derecha: tarjetas de contacto --- */
.rd-contacto-card {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid #e2dccf;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 12px;
	text-decoration: none;
	background: #fff;
	transition: box-shadow .15s, border-color .15s;
	}
.rd-contacto-card:hover {
	box-shadow: 0 3px 12px rgba(27,46,75,.09);
	border-color: #D4380D;
	}
.rd-cc-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #D4380D;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	}
.rd-cc-text {
	color: #1B2E4B;
	line-height: 1.3;
	}
.rd-cc-text strong {
	font-size: 16px;
	font-weight: 700;
	display: block;
	}
.rd-cc-sub {
	font-size: 13px;
	color: #5a6275;
	}

/* --- Redes sociales (pildoras delgadas) --- */
.rd-contacto-social {
	display: flex;
	flex-direction: column;
	gap: 9px;
	}
.rd-soc-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 1px solid #d4d8e0;
	border-radius: 30px;
	padding: 9px 18px;
	text-decoration: none;
	color: #1B2E4B;
	font-weight: 600;
	font-size: 14px;
	background: #fff;
	transition: border-color .15s, color .15s, box-shadow .15s;
	}
.rd-soc-pill i {
	font-size: 15px;
	}
.rd-soc-pill:hover {
	border-color: #D4380D;
	color: #D4380D;
	box-shadow: 0 2px 8px rgba(27,46,75,.07);
	}

/* Ocultar la barra flotante de COMPARTIR del tema en la pagina de Contacto:
   no forma parte del diseño del mockup (las redes para seguir van a la derecha). */
.page-id-415 .mvp-post-soc-wrap,
.page-id-415 .mvp-soc-mob-cont,
.page-id-415 .mvp-soc-mob-list {
	display: none !important;
	}

/* Mensaje de confirmacion (tras enviar) */
.wpforms-confirmation-container-full {
	background: #eef6ee !important;
	border: 1px solid #bcd9bc !important;
	border-left: 4px solid #2e7d32 !important;
	border-radius: 8px;
	color: #1f4620 !important;
	padding: 16px 18px !important;
	font-size: 16px;
	}
/* Errores de validacion */
.rd-form-contacto input.wpforms-error,
.rd-form-contacto textarea.wpforms-error {
	border-color: #D4380D !important;
	background: #fff;
	}
.rd-form-contacto label.wpforms-error {
	color: #D4380D;
	font-size: 13px;
	border: none !important;
	margin-top: 5px;
	}

/* --- Miniaturas: el contenedor de imagen del tema tiene fondo NEGRO; como las fotos
   son lazy-load (cargan al hacer scroll), mientras tanto se ven "cajas negras" poco
   profesionales. Cambiamos el placeholder a un gris claro neutral (combina con el crema). --- */
.mvp-blog-story-img,
.mvp-feat1-feat-img,
.mvp-feat1-list-img,
.mvp-widget-feat2-right-img,
.mvp-widget-out .mvp-blog-story-img,
.mvp-main-blog-out .mvp-blog-story-img,
span.mvp-reg-block-link-wrap {
	background-color: #e7e1d6 !important;
	}

/* --- Categoria: lista "Más de [categoria]" que llena el espacio del sidebar derecho --- */
.rd-cat-more {
	margin-top: 26px;
	}
.rd-cat-more-head {
	background: #1B2E4B;
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .03em;
	padding: 8px 12px;
	margin: 0 0 16px;
	border-left: 4px solid #D4380D;
	}
.rd-cat-more-list {
	list-style: none;
	margin: 0;
	padding: 0;
	}
.rd-cat-more-list li {
	margin: 0 0 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid #e7e1d6;
	}
.rd-cat-more-list li:last-child {
	border-bottom: 0;
	}
.rd-cat-more-list a {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	text-decoration: none;
	}
.rd-cat-more-img {
	flex: 0 0 84px;
	}
.rd-cat-more-img img {
	width: 84px;
	height: 58px;
	object-fit: cover;
	display: block;
	border-radius: 3px;
	}
.rd-cat-more-t {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	color: #1B2E4B;
	}
.rd-cat-more-list a:hover .rd-cat-more-t {
	color: #D4380D;
	}

/* Aumentar la letra del contenido (16px -> 20px; el cliente pidio "un px mas" sobre 19) */
#mvp-content-main,
#mvp-content-main p,
.mvp-post-add-main {
	font-size: 20px;
	line-height: 1.7;
	}
/* En movil/tablet el tema padre clampa el texto de la noticia a 1rem (16px) en todos sus
   breakpoints y carga DESPUES de este archivo; con el doble #id ganamos por especificidad.
   Mismo "un px mas" del cliente aplicado sobre los 16px que se veian en movil. */
@media (max-width: 1003px) {
	#mvp-content-wrap #mvp-content-main,
	#mvp-content-wrap #mvp-content-main p,
	#mvp-article-wrap .mvp-post-add-main p {
		font-size: 17px;
		}
	}

/* Logo del footer al mismo tamano que el del header (evita el logo de 1200px) */
#mvp-foot-logo img {
	width: auto;
	max-width: 260px;
	height: auto;
	}

/* --- Icono de X (Twitter): el tema carga Font Awesome 5, que no tiene el glifo
   de X (fa-x-twitter es de FA6) y queda vacio. Lo dibujamos con una mascara SVG
   del logo oficial de X, asi se ve en cualquier version de FA. --- */
.fa-x-twitter:before,
a.fa-x-twitter:before {
	content: "" !important;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l174.9-199.8L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l174.9-199.8L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"/></svg>') no-repeat center / contain;
	}

/* --- Orden de redes en footer y menu lateral (fly): Instagram, TikTok, Facebook, X, YouTube.
   El tema las imprime como FB, X, IG, TikTok, YT; las reordenamos con flex + :has()
   sin tocar las plantillas. (En el header el orden ya viene correcto desde header.php.) --- */
ul.mvp-foot-soc-list,
ul.mvp-fly-soc-list {
	display: flex;
	}
/* Redes del footer centradas */
ul.mvp-foot-soc-list {
	justify-content: center;
	}
ul.mvp-foot-soc-list li:has(a.fa-instagram),
ul.mvp-fly-soc-list li:has(a.fa-instagram)   { order: 1; }
ul.mvp-foot-soc-list li:has(a.fa-tiktok),
ul.mvp-fly-soc-list li:has(a.fa-tiktok)      { order: 2; }
ul.mvp-foot-soc-list li:has(a.fa-facebook-f),
ul.mvp-fly-soc-list li:has(a.fa-facebook-f)  { order: 3; }
ul.mvp-foot-soc-list li:has(a.fa-x-twitter),
ul.mvp-fly-soc-list li:has(a.fa-x-twitter)   { order: 4; }
ul.mvp-foot-soc-list li:has(a.fa-youtube),
ul.mvp-fly-soc-list li:has(a.fa-youtube)     { order: 5; }

/* Evita que el boton social quede "activo/enfocado" tras el click (igual que los demas) */
ul.mvp-foot-soc-list li a:focus,
ul.mvp-nav-soc-list li a:focus,
.mvp-fly-soc-list li a:focus {
	outline: none;
	}

/* --- Logo del header SIEMPRE visible y completo ---
   El tema da al contenedor del logo 30px de alto y a la barra 50px con
   overflow:hidden; como nuestro logo es 2:1 (con eslogan) se recortaba y solo
   se veia entero al pasar el mouse (:hover -> overflow:visible). Lo ajustamos
   para que el lockup completo (RD EN HECHOS + LO REAL IMPORTA) quepa siempre. */
#mvp-main-nav-small,
.mvp-nav-small-cont,
#mvp-main-nav-small-cont {
	overflow: visible;
	}
.mvp-nav-small-logo {
	height: auto;
	margin: 4px 20px 4px 0;
	}
.mvp-nav-small-logo img,
#mvp-nav-small-wrap .mvp-nav-small-logo img {
	max-height: 42px;
	width: auto;
	display: block;
	}

/* ============ MOVIL: SECCIONES DEL HOME A UNA SOLA COLUMNA ============
   Pedido del cliente: en movil todas las noticias en una sola columna.
   En el tema, los bloques feat2 del home (destacado + 2 tarjetas centrales +
   lista lateral) quedan flotados lado a lado y se ven apretados en el telefono.
   Aqui los apilamos a ancho completo y cada tarjeta central queda con la
   miniatura a la izquierda y el texto a la derecha (igual que la lista lateral). */
@media (max-width: 767px) {
	#mvp-home-widget-wrap .mvp-widget-feat2-left,
	#mvp-home-widget-wrap .mvp-widget-feat2-left-cont,
	#mvp-home-widget-wrap .mvp-widget-feat2-right,
	#mvp-home-widget-wrap .mvp-widget-feat2-right-cont,
	#mvp-home-widget-wrap .mvp-widget-feat2-side,
	#mvp-home-widget-wrap .mvp-widget-feat2-side-list {
		width: 100% !important;
		float: none !important;
		}
	/* IMPORTANTE: el destacado y la caja lateral roja tienen contenido FLOTADO. Al quitar
	   el float del contenedor hay que CONTENER ese float (overflow:hidden), si no el
	   contenedor colapsa a altura 0: el destacado monta su titulo absoluto sobre lo de
	   abajo (componentes sobrepuestos) y la CAJA ROJA lateral se reduce a una franja
	   delgada (el fondo rojo "no se ve" en movil). Con overflow:hidden el rojo cubre toda
	   la lista, igual que en la web. NO tocar la altura de .mvp-feat1-feat-img (la fija el tema). */
	#mvp-home-widget-wrap .mvp-widget-feat2-left,
	#mvp-home-widget-wrap .mvp-widget-feat2-left-cont,
	#mvp-home-widget-wrap .mvp-widget-feat2-side,
	#mvp-home-widget-wrap .mvp-widget-feat2-side-list {
		overflow: hidden;
		}
	#mvp-home-widget-wrap .mvp-feat1-feat-img {
		width: 100% !important;
		}
	#mvp-home-widget-wrap .mvp-widget-feat2-right {
		margin-top: 14px;
		}
	#mvp-home-widget-wrap .mvp-widget-feat2-right-cont {
		margin-bottom: 16px;
		overflow: hidden;
		}
	#mvp-home-widget-wrap .mvp-widget-feat2-right-img {
		width: 90px !important;
		float: left !important;
		margin-right: 12px;
		}
	#mvp-home-widget-wrap .mvp-widget-feat2-right-img img.mvp-mob-img {
		width: 90px !important;
		height: auto;
		}
	#mvp-home-widget-wrap .mvp-widget-feat2-right-text {
		width: auto !important;
		float: none !important;
		overflow: hidden;
		}
	}

/* ============ MENU / ENCABEZADO FIJO AL HACER SCROLL ============
   Cliente: "al bajar se oculta el menU, dejarlo fijo". La clase .rd-navbar-fixed la
   pone/quita el JS del child (functions.php, rd_menu_fijo_scroll).
   - Escritorio: el tema ya deja fija la franja del logo (#mvp-main-nav-top); fijamos el
     MENU (#mvp-main-nav-bot) justo debajo (top:54px).
   - MOvil: el tema deja fijo #mvp-main-nav-top pero lo OCULTA al bajar (transform);
     transform:none lo fuerza visible.
   Selector ID+clase para ganar al CSS del tema (que usa #id !important). */
#mvp-main-nav-bot.rd-navbar-fixed {
	position: fixed !important;
	top: 54px !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99980 !important;
	transform: none !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	}
#mvp-main-nav-top.rd-navbar-fixed {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99980 !important;
	transform: none !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	}
/* El menU principal tiene 14 items de primer nivel y envuelve a 2 filas. El tema fija
   height:50px en los contenedores del menU, asI que al quedar FIJO la 2a fila se desbordaba
   y se montaba sobre el contenido al hacer scroll (visible en /contactos/). Solo en estado
   fijo dejamos esas alturas en auto para que la barra crezca y el fondo cubra ambas filas. */
#mvp-main-nav-bot.rd-navbar-fixed,
#mvp-main-nav-bot.rd-navbar-fixed #mvp-main-nav-bot-cont,
#mvp-main-nav-bot.rd-navbar-fixed #mvp-nav-bot-wrap,
#mvp-main-nav-bot.rd-navbar-fixed .mvp-nav-bot-cont,
#mvp-main-nav-bot.rd-navbar-fixed .mvp-nav-bot-left-out,
#mvp-main-nav-bot.rd-navbar-fixed .mvp-nav-bot-left-in,
#mvp-main-nav-bot.rd-navbar-fixed .mvp-nav-bot-right-out,
#mvp-main-nav-bot.rd-navbar-fixed .mvp-nav-menu {
	height: auto !important;
	}

/* Lo MISMO pero en estado NORMAL (no fijo): el tema clampa la barra del menU a 50px,
   por lo que la 2a fila del menU (Sin Libreto / Y eso… ¿qué significa?) se desbordaba y se
   montaba sobre el banner/ticker que van justo debajo. En escritorio dejamos la barra en
   auto (min 50px para no alterar el caso de 1 fila) para que reserve el alto de las 2 filas. */
@media (min-width: 1004px) {
	#mvp-main-nav-bot,
	#mvp-main-nav-bot-cont,
	#mvp-nav-bot-wrap,
	#mvp-main-nav-bot .mvp-nav-bot-cont,
	#mvp-main-nav-bot .mvp-nav-bot-left-out,
	#mvp-main-nav-bot .mvp-nav-bot-left-in,
	#mvp-main-nav-bot .mvp-nav-bot-right-out,
	#mvp-main-nav-bot .mvp-nav-menu {
		height: auto !important;
		min-height: 50px;
		}
	}

/* ============ CONTRASTE: ETIQUETAS DE CATEGORIA EN CAJAS OSCURAS ============
   Cliente: "hay secciones que no se ven bien por el color de fondo y el texto".
   La etiqueta de categoria (.mvp-cd-cat) es naranja de marca #D4380D; sobre las cajas
   navy/rojas de las secciones del home el contraste es ~2.8 (ilegible). En esas cajas
   oscuras la pasamos a BLANCO (contraste ~13). En fondos claros sigue naranja de marca. */
#mvp-home-widget-wrap .mvp-widget-feat2-main .mvp-cd-cat,
#mvp-home-widget-wrap .mvp-widget-feat2-side .mvp-cd-cat,
#mvp-home-widget-wrap .mvp-widget-dark .mvp-cd-cat,
#mvp-home-widget-wrap .mvp-widget-dark-feat .mvp-cd-cat,
#mvp-home-widget-wrap .mvp-widget-dark-sub .mvp-cd-cat {
	color: #ffffff !important;
	}