@font-face {
	font-family: 'Noto Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fuentes/noto-serif-latin-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Serif';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fuentes/noto-serif-latin-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fuentes/inter-latin-400.woff2') format('woff2');
}

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

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fuentes/inter-latin-600.woff2') format('woff2');
}

/* mini framework */

:root {
	--zz-principal: #028038;
	--zz-blanco: #fff;
	--zz-negro:#000;
	--zz-gris:#5D5D5D;
	--zz-gris-claro: #D3D3D3;
	--zz-gris-masclaro: #f4f4f4;
	--zz-verde-claro: #E2EEE6;
}

.gris, .gris p, .gris-h1 h1, .gris-h2 h2, .gris-h3 h3, .gris-h4 h4, .gris-h5 h5, .gris-h6 h6, .gris-h4-a h4 a {
	color:var(--zz-gris);
}
.blanco, .blanco p, .blanco-h1 h1, .blanco-h2 h2, .blanco-h3 h3, .blanco-h4 h4, .blanco-h5 h5, .blanco-h6 h6, .blanco-h4-a h4 a {
	color:var(--zz-blanco);
}
.negro, .negro p, .negro-h1 h1, .negro-h2 h2, .negro-h3 h3, .negro-h4 h4, .negro-h5 h5, .negro-h6 h6, .negro-h4-a h4 a {
	color:var(--zz-negro);
}
.verde, .verde p, .verde-h1 h1, .verde-h2 h2, .verde-h3 h3, .verde-h4 h4, .verde-h5 h5, .verde-h6 h6, .verde-h4-a h4 a {
	color:var(--zz-principal);
}


/* ------------------------------------------------------------
   ESCALA TIPOGRÁFICA FLUIDA
   Viewport:  360px (mín)  ->  1300px (máx)
   Base:       16px (mín)  ->    18px (máx)   [= .txt18, paso 0]
   Ratio:      1.2  (mín)  ->   1.333 (máx)

   Por encima de 1300px el tamaño se mantiene en el máximo; por
   debajo empieza a interpolar hasta el mínimo en 360px.
   Todos los máximos <= 2,5x su mínimo (WCAG 1.4.4).
   ------------------------------------------------------------ */

.txt12, .txt12-h1 h1, .txt12-h2 h2, .txt12-h3 h3, .txt12-h4 h4, .txt12-h5 h5, .txt12-h6 h6 {
	font-size: 0.75rem; /* 12px fijo */
	line-height: 1.5;
}

.txt14, .txt14-h1 h1, .txt14-h2 h2, .txt14-h3 h3, .txt14-h4 h4, .txt14-h5 h5, .txt14-h6 h6 {
	font-size: 0.875rem; /* 14px fijo */
	line-height: 1.5;
}

.txt16, .txt16-h1 h1, .txt16-h2 h2, .txt16-h3 h3, .txt16-h4 h4, .txt16-h5 h5, .txt16-h6 h6 {
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
}

.txt18, .txt18-h1 h1, .txt18-h2 h2, .txt18-h3 h3, .txt18-h4 h4, .txt18-h5 h5, .txt18-h6 h6 {
	font-size: clamp(1rem, 0.952rem + 0.213vw, 1.125rem); /* 16px -> 18px */
	line-height: 1.5;
}

.txt24, .txt24-h1 h1, .txt24-h2 h2, .txt24-h3 h3, .txt24-h4 h4, .txt24-h5 h5, .txt24-h6 h6 {
	font-size: clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem); /* 19px -> 24px */
	line-height: 1.3;
}

.txt32, .txt32-h1 h1, .txt32-h2 h2, .txt32-h3 h3, .txt32-h4 h4, .txt32-h5 h5, .txt32-h6 h6 {
	font-size: clamp(1.4375rem, 1.222rem + 0.957vw, 2rem); /* 23px -> 32px */
	line-height: 1.25;
}

.txt48, .txt48-h1 h1, .txt48-h2 h2, .txt48-h3 h3, .txt48-h4 h4, .txt48-h5 h5, .txt48-h6 h6 {
	font-size: clamp(1.875rem, 1.444rem + 1.915vw, 3rem); /* 30px -> 48px */
	line-height: 1.2;
}

.txt64, .txt64-h1 h1, .txt64-h2 h2, .txt64-h3 h3, .txt64-h4 h4, .txt64-h5 h5, .txt64-h6 h6 {
	font-size: clamp(2.25rem, 1.58rem + 2.979vw, 4rem); /* 36px -> 64px */
	line-height: 1.2;
}

.txt80, .txt80-h1 h1, .txt80-h2 h2, .txt80-h3 h3, .txt80-h4 h4, .txt80-h5 h5, .txt80-h6 h6 {
	font-size: clamp(2.5625rem, 1.629rem + 4.149vw, 5rem); /* 41px -> 80px */
	line-height: 1.2;
}
/* ------------------------------------------------------------
   ESCALA DE ESPACIADO FLUIDA
   Anchos de referencia: 360px -> 1400px (igual que la tipografía).

   Una sola unidad fluida (10px en móvil -> 20px en escritorio) que
   cada clase multiplica. Todos los espaciados se comprimen al 50%
   en móvil; para cambiar esa compresión, se toca el primer valor
   del clamp de --zz-espacio-u y se reajusta toda la escala.

   El multiplicador es siempre: valor_escritorio / 20.
   ------------------------------------------------------------ */

:root {
	--zz-espacio-u: clamp(0.625rem, 0.386rem + 1.064vw, 1.25rem); /* 10px -> 20px */
}

/* --- Fijos (comprimir un hueco ya pequeño lo deja demasiado justo) --- */
.zz-margen-arriba-10 { margin-top: 0.625rem; }
.zz-margen-abajo-10  { margin-bottom: 0.625rem; }
.zz-margen-arriba-20 { margin-top: 1.25rem; }
.zz-margen-abajo-20  { margin-bottom: 1.25rem; }

/* --- Márgenes fluidos (móvil -> escritorio) --- */
.zz-margen-arriba-30  { margin-top: calc(var(--zz-espacio-u) * 1.5); } /* 15 -> 30 */
.zz-margen-arriba-40  { margin-top: calc(var(--zz-espacio-u) * 2); }   /* 20 -> 40 */
.zz-margen-arriba-60  { margin-top: calc(var(--zz-espacio-u) * 3); }   /* 30 -> 60 */
.zz-margen-arriba-80  { margin-top: calc(var(--zz-espacio-u) * 4); }   /* 40 -> 80 */
.zz-margen-arriba-100 { margin-top: calc(var(--zz-espacio-u) * 5); }   /* 50 -> 100 */
.zz-margen-arriba-120 { margin-top: calc(var(--zz-espacio-u) * 6); }   /* 60 -> 120 */
.zz-margen-arriba-140 { margin-top: calc(var(--zz-espacio-u) * 7); }   /* 70 -> 140 */
.zz-margen-arriba-160 { margin-top: calc(var(--zz-espacio-u) * 8); }   /* 80 -> 160 */

.zz-margen-abajo-30  { margin-bottom: calc(var(--zz-espacio-u) * 1.5); }
.zz-margen-abajo-40  { margin-bottom: calc(var(--zz-espacio-u) * 2); }
.zz-margen-abajo-60  { margin-bottom: calc(var(--zz-espacio-u) * 3); }
.zz-margen-abajo-80  { margin-bottom: calc(var(--zz-espacio-u) * 4); }
.zz-margen-abajo-100 { margin-bottom: calc(var(--zz-espacio-u) * 5); }
.zz-margen-abajo-120 { margin-bottom: calc(var(--zz-espacio-u) * 6); }
.zz-margen-abajo-140 { margin-bottom: calc(var(--zz-espacio-u) * 7); }
.zz-margen-abajo-160 { margin-bottom: calc(var(--zz-espacio-u) * 8); }

/* --- Paddings --- */
.zz-relleno-arriba-10 { padding-top: 0.625rem; }
.zz-relleno-abajo-10  { padding-bottom: 0.625rem; }
.zz-relleno-arriba-20 { padding-top: 1.25rem; }
.zz-relleno-abajo-20  { padding-bottom: 1.25rem; }

.zz-relleno-arriba-30  { padding-top: calc(var(--zz-espacio-u) * 1.5); }
.zz-relleno-arriba-40  { padding-top: calc(var(--zz-espacio-u) * 2); }
.zz-relleno-arriba-60  { padding-top: calc(var(--zz-espacio-u) * 3); }
.zz-relleno-arriba-80  { padding-top: calc(var(--zz-espacio-u) * 4); }
.zz-relleno-arriba-100 { padding-top: calc(var(--zz-espacio-u) * 5); }
.zz-relleno-arriba-120 { padding-top: calc(var(--zz-espacio-u) * 6); }
.zz-relleno-arriba-140 { padding-top: calc(var(--zz-espacio-u) * 7); }
.zz-relleno-arriba-160 { padding-top: calc(var(--zz-espacio-u) * 8); }

.zz-relleno-abajo-30  { padding-bottom: calc(var(--zz-espacio-u) * 1.5); }
.zz-relleno-abajo-40  { padding-bottom: calc(var(--zz-espacio-u) * 2); }
.zz-relleno-abajo-60  { padding-bottom: calc(var(--zz-espacio-u) * 3); }
.zz-relleno-abajo-80  { padding-bottom: calc(var(--zz-espacio-u) * 4); }
.zz-relleno-abajo-100 { padding-bottom: calc(var(--zz-espacio-u) * 5); }
.zz-relleno-abajo-120 { padding-bottom: calc(var(--zz-espacio-u) * 6); }
.zz-relleno-abajo-140 { padding-bottom: calc(var(--zz-espacio-u) * 7); }
.zz-relleno-abajo-160 { padding-bottom: calc(var(--zz-espacio-u) * 8); }

.mayusculas {
	text-transform: uppercase;
}

.dt-btn.boton-transparente {
	background-color: transparent !important;
	border: 1px solid var(--zz-principal) !important;
	color: var(--zz-negro, #000) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dt-btn.boton-transparente:hover,
.dt-btn.boton-transparente:focus-visible {
	background-color: var(--zz-verde-claro) !important;
	border-color: var(--zz-principal) !important;
	color: var(--zz-negro, #000) !important;
}
.dt-btn.boton-transparente-blanco {
	background-color: transparent !important;
	border: 1px solid var(--zz-principal) !important;
	color: var(--zz-negro, #000) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dt-btn.boton-transparente-blanco:hover,
.dt-btn.boton-transparente-blanco:focus-visible {
	background-color: var(--zz-blanco) !important;
	border-color: var(--zz-principal) !important;
	color: var(--zz-negro, #000) !important;
}

.dt-btn.boton-blanco {
	background-color: var(--zz-blanco) !important;
	border: 1px solid var(--zz-blanco) !important;
	color: var(--zz-negro, #000) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dt-btn.boton-blanco:hover,
.dt-btn.boton-blanco:focus-visible {
	background-color: var(--zz-verde-claro) !important;
	border-color: var(--zz-verde-claro) !important;
	color: var(--zz-negro, #000) !important;
}

.ancho-minimo-250 {
	min-width: 250px;
}

/* ------------------------------------------------------------
   ANCHO MÁXIMO
   La clase sola limita el módulo entero; con sufijo, limita solo
   ese elemento dentro del módulo.
   Para otros anchos, duplicar el bloque cambiando el número.
   ------------------------------------------------------------ */

.ancho-maximo-800, .ancho-maximo-800-p p, .ancho-maximo-800-h1 h1, .ancho-maximo-800-h2 h2, .ancho-maximo-800-h3 h3, .ancho-maximo-800-h4 h4, .ancho-maximo-800-h5 h5, .ancho-maximo-800-h6 h6 {
	max-width: 800px;
}
.ancho-maximo-600, .ancho-maximo-600-p p, .ancho-maximo-600-h1 h1, .ancho-maximo-600-h2 h2, .ancho-maximo-600-h3 h3, .ancho-maximo-600-h4 h4, .ancho-maximo-600-h5 h5, .ancho-maximo-600-h6 h6 {
	max-width: 600px;
}
.ancho-maximo-700, .ancho-maximo-700-p p, .ancho-maximo-700-h1 h1, .ancho-maximo-700-h2 h2, .ancho-maximo-700-h3 h3, .ancho-maximo-700-h4 h4, .ancho-maximo-700-h5 h5, .ancho-maximo-700-h6 h6 {
	max-width: 700px;
}
/* ------------------------------------------------------------
   CENTRADO HORIZONTAL
   Se combina con cualquier clase de ancho máximo:
   class="ancho-maximo-800 zz-centrado"
   ------------------------------------------------------------ */

.zz-centrado, .zz-centrado-p p, .zz-centrado-h1 h1, .zz-centrado-h2 h2, .zz-centrado-h3 h3, .zz-centrado-h4 h4, .zz-centrado-h5 h5, .zz-centrado-h6 h6 {
	margin-left: auto;
	margin-right: auto;
}

/* Separador con el color corporativo */
.separador-color-principal .vc_sep_line {
	border-top-color: var(--zz-principal) !important;
}
.zz-img-fija img {
/*	width: 200px; */
	width: auto;
	max-width: none;
	height: auto;
}

/* Overlay degradado sobre la imagen de fondo de la fila.
   Se aplica al overlay que genera Ultimate Addons, así que en el
   panel hay que dejar activado el overlay (con cualquier color:
   este CSS lo sustituye). */
.zz-fila-degradado .upb_bg_overlay {
	background-color: transparent;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.15) 100%
	);
}
/* En móvil, degradado de arriba hacia abajo: claro arriba. */
@media (max-width: 767px) {
	.zz-fila-degradado .upb_bg_overlay {
		background-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.15) 0%,
			rgba(0, 0, 0, 0.75) 100%
		);
	}
}
/* fin mini framework */

/* ------------------------------------------------------------
   Aparición retardada del header transparente, para que el menú
   blanco no quede sobre fondo blanco mientras carga la imagen.
   ------------------------------------------------------------ */

.masthead {
	opacity: 0;
	animation: zz-aparece-header 0.4s ease 0.4s forwards;
}

@keyframes zz-aparece-header {
	from { opacity: 0; }
	to   { opacity: 1; }
}


a {
	text-decoration: none;
}

.popup-search-wrap, .popup-search-wrap .field.searchform-s{
	border-radius:6px;
}
.mobile-mini-widgets-in-menu .popup-search-wrap {
	max-width: 90% !important;
	width: 90% !important;
}

.page-title.page-title-responsive-enabled .wf-wrap {
	align-items: flex-start;
}

.inline-header .header-bar > .mini-widgets {
	padding: 0px 0px 0px 30px;
}

.submit.text-disable .the7-mw-icon-search-bold:before {
    content: "\ec051";
	color:#666!important;
	border: 1px solid var(--zz-principal);
	border-radius:20px;
	padding:8px
}

.transparent .masthead.sticky-off .submit.text-disable .the7-mw-icon-search-bold:before {
	color: #fff !important;
	background-color:var(--zz-principal);
}

.page-title.page-title-responsive-enabled .wf-wrap {
	text-align: left;
}


.fila-afiliate {
	margin: calc(var(--zz-espacio-u) * 6) 0; /* 60px -> 120px */
	background: var(--zz-principal);
	border-radius: 8px;
}

.fila-afiliate .wpb_content_element {
	margin-bottom: 0;
}

.fila-afiliate h2 {
	margin-left: calc(var(--zz-espacio-u) * 3); /* 30px -> 60px */
	font-size: clamp(1.875rem, 1.444rem + 1.915vw, 3rem); /* 30px -> 48px */
	color: var(--zz-blanco);
}

.fila-afiliate p {
	margin-right: calc(var(--zz-espacio-u) * 1); /* 10px -> 20px */
	font-size: clamp(1rem, 0.952rem + 0.213vw, 1.125rem); /* 16px -> 18px */
	color: var(--zz-blanco);
}

.fila-afiliate .default-btn-shortcode.btn-inline-right {
	margin-right: calc(var(--zz-espacio-u) * 3); /* 30px -> 60px */
}

/* single post noticias */



/* fin single noticia */


.titulo-seecion{
	margin-top:0px;
	margin-bottom:40px;
}
.titulo-seecion h2 {
	border-bottom:2px solid var(--zz-principal);
	padding-bottom:18px;
}

.fila-noticias .classic-layout-list article.post .entry-title {
	font-size: clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem); /* 19px -> 24px */
	line-height: 1.3;
}
.fila-noticias.noticia-principal .classic-layout-list article.post .entry-title {
	font-size: clamp(1.4375rem, 1.222rem + 0.957vw, 2rem); /* 23px -> 32px */
	line-height: 1.25;
}

.fila-noticias .classic-layout-list article.post .entry-excerpt {
	font-size: clamp(1rem, 0.952rem + 0.213vw, 1.125rem); /* 16px -> 18px */
	line-height: 1.5;
	color: var(--zz-gris);
}

.zz-post-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.zz-post-categories a {
    background: var(--zz-verde-claro);
    border-radius: 8px;
    font-size: 12px;
	 line-height: 1.6;
    padding: 2px 8px 2px 8px;
    transition: 0.3s;
    text-decoration: none;
 text-transform: uppercase;
}
.zz-post-categories a:hover,
.zz-post-categories a:focus-visible {
    background: var(--zz-gris-claro);
}

/* instagram */
.fila-instagram .sbi_item {
	border:1px solid var(--zz-gris-claro);
	border-radius:8px;
}
.fila-instagram #sb_instagram .zz-sbi-caption {
	padding:20px 20px 30px 30px;
	color: var(--zz-gris);
	font-size:18px;
line-height:1.5;
}
.fila-instagram .sbi_item:hover {
	border:1px solid var(--zz-principal);
}
.fila-instagram #sb_instagram .zz-sbi-caption:hover {
	color: var(--zz-principal);
text-decoration:none;
}
.fila-instagram .sbi_item {
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fila-instagram .sbi_item:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* igualar alturas instagram */
#sb_instagram #sbi_images {
	align-items: stretch;
}

#sb_instagram .sbi_item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#sb_instagram .zz-sbi-caption {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 3;
	overflow: hidden;
}
/* fin igualar alturas instagram */


/* fin instagram */


/* ------------------------------------------------------------
   BENEFICIOS
   Fila con la clase zz-fila-beneficios; grilla horizontal de
   ZZ Blog Masonry Bakery (zz-structure-horizontal).
   El icono viene del campo ACF zz_icono_beneficio.

   El borde verde al pasar por encima y el enlace en toda la
   tarjeta los aporta el bloque genérico "grillas".
   ------------------------------------------------------------ */



/*
 * Borde en reposo. El :not(:hover) es imprescindible: sin él esta
 * regla empata en especificidad con el hover del bloque genérico
 * y, al ir después en el archivo, lo anularía.
 */
.zz-fila-beneficios .classic-layout-list article.post:not(:hover) {
	border-color: var(--zz-gris-claro);
}

/* Columna de contenido. El margen superior lo pone el CSS del
   plugin y el padding el CSS en línea de The7: ambos necesitan
   !important para poder anularse desde aquí. */
.zz-fila-beneficios .post-entry-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 0 !important;
	padding: 24px 24px 0 !important;
}

/* Caja verde del icono */
.zz-fila-beneficios .zz-icono-beneficio {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	align-self: flex-start; /* no se estira al ancho de la columna */
	width: 40px;
	height: 40px;
	margin: 0 0 24px;
	background: var(--zz-verde-claro);
	border-radius: 8px;
	overflow: hidden;
}

.zz-fila-beneficios .zz-icono-beneficio img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Título */
.zz-fila-beneficios .entry-title {
	margin: 0 0 12px !important;
	font-weight: 600;
	font-size: clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem) !important; /* 19px -> 24px */
	line-height: 1.3;
	color: var(--zz-negro);
}

.zz-fila-beneficios .entry-title a {
	color: inherit;
}

/* Descripción */
.zz-fila-beneficios .entry-excerpt {
	margin: 0 0 24px !important;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-gris);
}

.zz-fila-beneficios .entry-excerpt p {
	margin: 0;
}

/*
 * Barra inferior: se pega al fondo con margin-top auto y sale del
 * padding lateral con márgenes negativos, para que la línea llegue
 * a los bordes de la tarjeta.
 *
 * No se usa space-between porque The7 añade un pseudo-elemento al
 * enlace que actúa como tercer elemento del flex y descentra el
 * texto: se alinea todo a la izquierda y la flecha se empuja a la
 * derecha con margin-left auto.
 */
.zz-fila-beneficios .post-details.details-type-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	margin: auto -24px 0 !important;
	padding: 16px 24px;
	border-top: 1px solid var(--zz-gris-claro);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5;
	color: var(--zz-gris);
}

/* Neutraliza el pseudo-elemento que descentra el texto */
.zz-fila-beneficios .post-details.details-type-link::before,
.zz-fila-beneficios .post-details.details-type-link::after {
	display: none;
}

/* Flecha: se sustituye el icono de la fuente de The7 por el SVG
   del diseño, aplicado como máscara para poder colorearlo. */
.zz-fila-beneficios .post-details i {
	display: block;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin: 0 0 0 auto; /* empuja la flecha al extremo derecho */
	background-color: var(--zz-principal);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5.33333 0L4.39333 0.94L8.11333 4.66667H0V6H8.11333L4.39333 9.72667L5.33333 10.6667L10.6667 5.33333L5.33333 0Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5.33333 0L4.39333 0.94L8.11333 4.66667H0V6H8.11333L4.39333 9.72667L5.33333 10.6667L10.6667 5.33333L5.33333 0Z' fill='black'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* Oculta el glifo de la fuente de iconos */
.zz-fila-beneficios .post-details i::before {
	display: none;
}
/* Hover: el texto del enlace pasa a verde */
.zz-fila-beneficios .post-details.details-type-link:hover {
	color: var(--zz-principal);
}

/*
 * Entre 768 y 1262px la tarjeta se estrecha demasiado y la línea
 * de separación de la barra inferior descuadra la composición.
 * Por debajo de 768px las tarjetas se apilan a una columna y
 * recuperan ancho, así que la línea vuelve como en el diseño.
 */
@media (min-width: 768px) and (max-width: 1262px) {
	.zz-fila-beneficios .post-details.details-type-link {
		border-top: none;
	}
}

/* ------------------------------------------------------------
   SINGLE BENEFICIOS
   Plantilla propia: dos columnas (contenido / imagen).
   La línea verde del diseño se dibuja como borde inferior de la
   entradilla, que es el último elemento del bloque de cabecera.
   ------------------------------------------------------------ */

.single-beneficios #main {
	padding-bottom: 0 !important;
}

.ben-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: calc(var(--zz-espacio-u) * 4); /* 40px -> 80px */
	padding: calc(var(--zz-espacio-u) * 2) 0; /* 20px -> 40px */
}

.ben-col {
	flex: 1 1 0;
	min-width: 0; /* evita que textos largos rompan el flex */
}

/* --- Cabecera: icono + etiqueta --- */
.bloque-icono {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 16px;
}

.ben-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin: 0;
	background: var(--zz-verde-claro);
	border-radius: 8px;
	overflow: hidden;
}

.ben-icono img {
	display: block;
	width: 24px;
	height: 24px;
	max-width: none;
}

.ben-label {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.75rem; /* 12px */
	line-height: 1.5;
	color: var(--zz-principal);
	text-transform: uppercase;
	letter-spacing: 0;
}

/* --- Título --- */
.entry-title.ben-title {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: clamp(2.25rem, 1.58rem + 2.979vw, 4rem); /* 36px -> 64px */
	line-height: 1.2;
	color: var(--zz-negro);
}

/* --- Entradilla, con la línea verde de cierre del bloque --- */
.zz-beneficio-entradilla {
	margin: 0;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--zz-principal);
}

.zz-beneficio-entradilla p {
	margin: 0;
	max-width: 600px;
	font-size: clamp(1rem, 0.952rem + 0.213vw, 1.125rem); /* 16px -> 18px */
	line-height: 1.5;
	color: var(--zz-negro);
}

/* --- Cuerpo --- */
.ben-content {
	margin-top: 32px;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-gris);
}

.ben-content p {
	margin: 0 0 24px;
}

.ben-content ul {
	margin: 0px 20px 20px 20px;
	padding-left: 20px;
	list-style: disc;
}

.ben-content li {
	margin-bottom: 0;
}

.ben-content strong {
	font-weight: 700;
	color: inherit;
}

.ben-content p:last-child,
.ben-content ul:last-child {
	margin-bottom: 0;
}

/* --- Caja de contacto --- */
.zz-beneficio-contacto {
	margin-top: 32px;
	padding: 20px 24px 28px;
	background: var(--zz-verde-claro);
	border-radius: 8px;
}

.zz-beneficio-contacto p {
	margin: 0;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-gris);
}

.zz-beneficio-contacto a {
	color: inherit;
	text-decoration: underline;
}

.zz-beneficio-contacto a:hover {
	color: var(--zz-principal);
}

/* --- Imagen --- */
.ben-imagen-principal img {
	display: block;
	width: 100%;
	/*height: 450px;*/
	object-fit: cover;
	border-radius: 8px;
}

/* --- Móvil: una columna, con la imagen arriba --- */
@media (max-width: 767px) {
	.ben-columns {
		flex-direction: column;
		gap: 24px;
	}

	.ben-col {
		flex: 0 0 auto;
		width: 100%
	}
  /* para imagen principal arriba en móvil, descomentar esto: */
	/*
	.ben-col-right {
		order: -1;
	}
	*/

	.ben-imagen-principal img {
		/*height: auto;*/
		margin-top: 40px;
	}

	.zz-beneficio-entradilla {
		padding-bottom: 24px;
	}

	.ben-content,
	.zz-beneficio-contacto {
		margin-top: 24px;
	}
}
/* ------------------------------------------------------------
   OTROS BENEFICIOS (single de beneficio)
   El <aside> envuelve la cabecera y la grilla, y es quien lleva
   el fondo a ancho completo: así el color queda continuo sin
   depender de que ambas filas lo tengan.
   ------------------------------------------------------------ */

.zz-otros-beneficios {
		margin-top: calc(var(--zz-espacio-u) * 4); /* 40px -> 80px */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: calc(var(--zz-espacio-u) * 5);    /* 50px -> 100px */
	padding-bottom: calc(var(--zz-espacio-u) * 5); /* 50px -> 100px */
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	background: var(--zz-verde-claro);
}

/* Título de la sección */
.zz-otros-beneficios-cabecera {
	margin-bottom: 0;
}

.zz-otros-beneficios-cabecera h2 {
	margin: 0;
	font-weight: 600;
	font-size: clamp(1.875rem, 1.444rem + 1.915vw, 3rem); /* 30px -> 48px */
	line-height: 1.2;
	color: var(--zz-negro);
}

.zz-otros-beneficios  .wpb_content_element {
		margin-bottom: 0px;
	}

/* Sobre el fondo verde, las tarjetas van sin sombra */
.zz-otros-beneficios .classic-layout-list article.post {
	box-shadow: none;
}

@media screen and (max-width: 767px) {
	.zz-otros-beneficios .post-thumbnail-wrap{
		display:none;
	}
	.zz-otros-beneficios .default-btn-shortcode.btn-inline-right {
	float: none;
}
	
	
}






/* Alineación vertical de contenido en filas con altura fija (min-height),
   sin usar "Full Height Row". Sustituye el control que WPBakery 9.0
   ya no muestra para este caso. Aplicar la clase "zz-fila-vcentro" en
   "Extra class name" de la fila. No hace falta desde una actualizacion menor de WPBakery */

.vc_row.zz-fila-vcentro {
    display: flex;
    flex-wrap: wrap;
}
.vc_row.zz-fila-vcentro > .wpb_column {
    display: flex;
}
.vc_row.zz-fila-vcentro > .wpb_column > .vc_column-inner {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centro. Usa flex-start = arriba, flex-end = abajo */
    width: 100%;
}

/*
.zz-link-flecha {
    display: inline-flex;
    align-items: center;
    gap: 10px;
	 color: #333;
   text-decoration: none;
 
}

.zz-link-flecha::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    display: inline-block;
}
*/



/* secretarias */
/* ------------------------------------------------------------
   SECRETARÍAS
   Fila con la clase zz-fila-secretarias. Cada columna contiene
   dos módulos de texto: zz-secre1 (secretaría + secretario) y
   zz-secre2 (prosecretario), que juntos forman una tarjeta.

   El cargo se identifica como el párrafo SIN enlace de correo,
   no por su posición: así funciona también en las tarjetas que
   solo llevan título y email.
   ------------------------------------------------------------ */

/* Cadena de alturas para que las tarjetas se igualen */
.zz-fila-secretarias .wpb_column > .vc_column-inner {
	height: 100%;
}

/* La tarjeta */
.zz-fila-secretarias .vc_column-inner > .wpb_wrapper {
	height: 100%;
	margin-bottom: calc(var(--zz-espacio-u) * 3); /* 30px -> 60px */
	padding-bottom: 24px;
	background: var(--zz-blanco);
	border: 1px solid var(--zz-gris-claro);
	border-radius: 8px;
	overflow: hidden; /* recorta la banda verde según el radio */

}

/* Módulos: anulan su margen y aportan el padding lateral */
.zz-fila-secretarias .zz-secre1,
.zz-fila-secretarias .zz-secre2 {
	margin: 0;
	padding: 0 24px;
}

.zz-fila-secretarias .zz-secre2 {
	margin-top: 24px;
}

/* Cabecera: banda verde a todo el ancho de la tarjeta */
.zz-fila-secretarias .zz-secre1 h2 {
	margin: 0 -24px 24px;
	padding: 16px 24px;
	background: var(--zz-verde-claro);
	font-weight: 600;
	font-size: clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem); /* 19px -> 24px */
	line-height: 1.3;
	color: var(--zz-principal);
		border-bottom:1px solid var(--zz-gris-claro);
}

/* Separación general entre párrafos */
.zz-fila-secretarias .zz-secre1 p,
.zz-fila-secretarias .zz-secre2 p {
	margin-bottom: 8px;
}

.zz-fila-secretarias .zz-secre1 p:last-child,
.zz-fila-secretarias .zz-secre2 p:last-child {
	margin-bottom: 0;
}

/* Cargo: párrafo que no contiene enlace de correo */
.zz-fila-secretarias .zz-secre1 > .wpb_wrapper > p:not(:has(a[href^="mailto:"])),
.zz-fila-secretarias .zz-secre2 > .wpb_wrapper > p:not(:has(a[href^="mailto:"])) {
	margin: 0 0 4px;
	font-size: 0.75rem; /* 12px */
	line-height: 1.5;
	color: var(--zz-principal);
	text-transform: uppercase;
}

/* Nombre del secretario */
.zz-fila-secretarias .zz-secre1 h3 {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: clamp(1.4375rem, 1.222rem + 0.957vw, 2rem); /* 23px -> 32px */
	line-height: 1.2;
	color: var(--zz-negro);
}

/* Nombre del prosecretario */
.zz-fila-secretarias .zz-secre2 h3 {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem); /* 19px -> 24px */
	line-height: 1.2;
	color: var(--zz-negro);
}

/* Enlaces de email, con el icono en verde */
.zz-fila-secretarias a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-gris);
	word-break: break-word;
}

.zz-fila-secretarias a[href^="mailto:"]::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: var(--zz-principal);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22 6 12 13 2 6'%3E%3C/polyline%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22 6 12 13 2 6'%3E%3C/polyline%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	flex-shrink: 0;
}

.zz-fila-secretarias a[href^="mailto:"]:hover {
	color: var(--zz-principal);
}
/* Columna sin contenido: en escritorio se deja el hueco pero sin
   tarjeta; en móvil se oculta para que no ocupe altura al apilarse. */
.zz-fila-secretarias .vc_column-inner > .wpb_wrapper:not(:has(.zz-secre1)) {
	background: none;
	border: none;
}

@media (max-width: 767px) {
	.zz-fila-secretarias .wpb_column:not(:has(.zz-secre1)) {
		display: none;
	}
}

/* ------------------------------------------------------------
   VOCALES
   Fila con la clase zz-fila-vocales; un módulo de texto por
   columna con la clase zz-vocals, que contiene:
     <h3>  etiqueta ("Vocales Titulares")
     <p>   lista de nombres separados por <br>
   ------------------------------------------------------------ */

/* Cadena de alturas, igual que en las secretarías */
.zz-fila-vocales .wpb_column > .vc_column-inner {
	height: 100%;
}

/* La tarjeta verde */
.zz-fila-vocales .vc_column-inner > .wpb_wrapper {
	height: 100%;
	box-sizing: border-box;
	margin-bottom: calc(var(--zz-espacio-u) * 3); /* 30px -> 60px */
	padding: calc(var(--zz-espacio-u) * 2.4); /* 24px -> 48px */
	background: var(--zz-verde-claro);
	border-radius: 8px;
}

.zz-fila-vocales .zz-vocals {
	margin-bottom: 0;
}

/* Contenido en dos columnas */
.zz-fila-vocales .zz-vocals > .wpb_wrapper {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--zz-espacio-u) * 2.4); /* 24px -> 48px */
}

/* Etiqueta: ancho fijo a la izquierda */
.zz-fila-vocales .zz-vocals h3 {
	flex-shrink: 0;
	width: 100px;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.75rem; /* 12px */
	line-height: 1.5;
	color: var(--zz-principal);
	text-transform: uppercase;
}

/* Lista de nombres */
.zz-fila-vocales .zz-vocals p {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: 'Noto Serif', serif;
	font-weight: 600;
	font-size: clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem); /* 19px -> 24px */
	line-height: 1.3;
	color: var(--zz-negro);
}

/* En móvil la etiqueta pasa arriba: 100px de ancho fijo más los
   nombres a 24px no caben lado a lado en una pantalla pequeña. */
@media (max-width: 767px) {
	.zz-fila-vocales .zz-vocals > .wpb_wrapper {
		flex-direction: column;
		gap: 16px;
	}

	.zz-fila-vocales .zz-vocals h3 {
		width: auto;
	}
}


/* fin secretarias */

/* busquedas */ 
.search-results .classic-layout-list article.post {
	border-color: var(--zz-gris-claro);
}


.search #main {
	margin-bottom: calc(var(--zz-espacio-u) * 5);
}
.search .searchform {
	max-width: 600px;
}
@media (max-width: 480px) {
.paginator:not(.paginator-more-button) a, .paginator:not(.paginator-more-button) span {
padding: 1px 3px;
}
}

/* fin busquedas */
/* error 404 */

.error404 .post.error404 {
	text-align: left;
}
.error404 .searchform {
	max-width: 600px;
}
.error404 .content {
	min-height: 300px !important;
}
.error404 #main {
	padding-top: 0px;
}
/* fun error404 */
/* ------------------------------------------------------------
   BLOQUE DE CRÉDITOS Y REDES DEL FOOTER
   Se inyecta en la bottom bar de The7 vía el hook presscore_credits.
   ------------------------------------------------------------ */

.titular-pie {
	font: normal 600 clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem) / 1.5 'Inter', sans-serif;
	color:var(--zz-blanco);
}
.sub-titular-pie {
	font-size:18px;
}

.zz-footer-creditos {
	width: 100%;
	border-top: 1px solid var(--zz-principal);
	padding-top: 16px;
	padding-bottom:80px;
}

.zz-footer-creditos__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 64px;
}

.zz-footer-creditos__copy {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--zz-gris-claro);
}

.zz-footer-creditos__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.zz-footer-creditos__claim {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--zz-gris-claro);
}

/* Iconos de redes */
.zz-footer-redes {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El #bottom-bar da la especificidad necesaria para ganar al color
   de enlace que The7 aplica dentro de la barra inferior. */
#bottom-bar .zz-footer-redes a {
	display: block;
	color: var(--zz-blanco);
	transition: color 0.2s ease;
}

#bottom-bar .zz-footer-redes a:hover,
#bottom-bar .zz-footer-redes a:focus-visible {
	color: var(--zz-gris-claro, #D3D3D3);
}

.zz-footer-redes svg {
	display: block;
	width: 24px;
	height: 24px;
}
.pie-direccion a:hover {
	color:var(--zz-blanco);
}
/* fin footer */

@media screen and (max-width: 767px) {
	
	
}


/* fin single beneficio */

/* Fecha + compartir, debajo del H1 del single */
.zz-meta-titular {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	margin: 15px 0 30px;
}


/* ------------------------------------------------------------
   TABLAS DE COMISIONES INTERNAS
   Salida del plugin ZZ Campos Repetitivos.
   ------------------------------------------------------------ */

/* The7 aplica border-top transparente a todas las celdas; con
   border-collapse eso produce líneas fantasma en la cabecera. */
.zz-repeater-table th,
.zz-repeater-table td {
	border-top: none;
	border-color: var(--zz-gris-claro);
}

.zz-repeater-block {
	margin-bottom: calc(var(--zz-espacio-u) * 3.2); /* 32px -> 64px */
}

/* Título de sección ("Facultades", "Colegios"...) */
.zz-repeater-title {
	margin: 0 0 24px;
	font-weight: 600;
	font-size: clamp(1.4375rem, 1.222rem + 0.957vw, 2rem); /* 23px -> 32px */
	line-height: 1.3;
	color: var(--zz-negro);
}

.zz-repeater-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed; /* columnas de igual ancho, como en el diseño */
}

/* Cabecera */
.zz-repeater-table__header {
	height: 40px;
	padding: 8px 16px;
	background: var(--zz-verde-claro);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.75rem; /* 12px */
	line-height: 1.5;
	color: var(--zz-principal);
	text-transform: uppercase;
	text-align: left;
	vertical-align: middle;
}

/* Celdas */
.zz-repeater-table__cell {
	height: 64px;
	padding: 12px 16px;
	background: none;
	border-bottom: 1px solid var(--zz-gris-claro);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5;
	color: var(--zz-negro);
	vertical-align: middle;
	word-break: break-word;
}

/* Primera columna: nombre de la dependencia */
.zz-repeater-table__cell--zz_dependencia {
	font-family: 'Noto Serif', serif;
	font-weight: 600;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.3;
}

.zz-repeater-table__header:first-child,
.zz-repeater-table__cell:first-child {
	padding-left: 15px!important;
}

/* ------------------------------------------------------------
   Tablet y móvil: scroll horizontal por tabla.
   - Desplazable con el dedo (comportamiento nativo de
     overflow en táctil) y con la barra horizontal.
   - La tabla mantiene un ancho mínimo para que las columnas
     no se aplasten; ajusta ese valor a tus contenidos.
   - El título de la tabla queda fijo: solo se desliza la tabla.
   ------------------------------------------------------------ */
@media (max-width: 992px) {
	.zz-repeater-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /* inercia en iOS antiguos */
		scrollbar-width: thin;             /* Firefox */
		scrollbar-color: var(--zz-principal) #e8e8e8; /* Firefox */
	}

	/* Barra visible y discreta en navegadores WebKit/Blink */
	.zz-repeater-scroll::-webkit-scrollbar {
		height: 8px;
	}

	.zz-repeater-scroll::-webkit-scrollbar-track {
		background: #e8e8e8;
		border-radius: 4px;
	}

	.zz-repeater-scroll::-webkit-scrollbar-thumb {
		background: var(--zz-principal);
		border-radius: 4px;
	}

	/* Ancho mínimo que fuerza el scroll en vez de aplastar columnas.
	   Súbelo si alguna tabla tiene muchas columnas o textos largos. */
	.zz-repeater-table {
		min-width: 640px;
	}
}

/* ------------------------------------------------------------
   Accesibilidad: indicador de foco visible cuando la región de
   scroll se alcanza con teclado (Tab). Solo con :focus-visible,
   así no aparece al tocar/clicar.
   ------------------------------------------------------------ */
.zz-repeater-scroll:focus-visible {
	outline: 2px solid var(--zz-principal);
	outline-offset: 2px;
}
/* fin campos repetitivos */



/* grillas */

.fila-noticias .classic-layout-list article.post {
	border:1px #D3D3D3 solid;
}

.classic-layout-list article.post {
	position: relative;
	border: 1px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.classic-layout-list article.post:hover {
	border-color: var(--zz-principal);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
/*
 * The7 genera por instancia una regla con cuatro clases y
 * box-shadow:none que anula la sombra del hover. Hay que superarla
 * en especificidad, de ahí que se repitan .blog-shortcode y
 * .content-bg-on en el selector.
 */
.blog-shortcode.content-bg-on.classic-layout-list article.post:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.classic-layout-list .zz-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.classic-layout-list .post-thumbnail-wrap,
.classic-layout-list .post-entry-content a {
	position: relative;
	z-index: 2;
}

/* fin grillas */






/* single post */


@media screen and (max-width: 1200px) {
.main-nav > li > a {
    margin-left:5px;
	margin-right:5px;
}
.main-nav > li > a .menu-text {
	font-size:14px;
}
}

@media screen and (max-width: 1040px) {
.main-nav > li > a {
    margin-left:2px;
	margin-right:0px;
}
}

/* fin single post */

/* ------------------------------------------------------------
   ENCABEZADO DE PÁGINAS INTERNAS
   Fila de WPBakery con la clase "encabezado-pagina".
   El HTML lo genera el módulo de texto (h1 + p), así que la línea
   verde se dibuja con un ::before sobre el h1.
   ------------------------------------------------------------ */

.encabezado-pagina .wpb_text_column {
	margin-bottom: 0;
	padding-bottom:60px;
}
.encabezado-pagina.encabezado-blanco .wpb_text_column {
	padding-bottom:0px;
}

.encabezado-pagina h1 {
	margin: 0;
	color: var(--zz-blanco);
}

/* Línea verde de 80x4px, encima del título */
.encabezado-pagina h1::before {
	content: "";
	display: block;
	width: 80px;
	height: 4px;
	margin-bottom: 14px;
	background: var(--zz-principal);
}

.encabezado-pagina p {
	margin: 14px 0 0;
	color: var(--zz-blanco);
}

.encabezado-blanco h1, .encabezado-blanco p {
	color: var(--zz-negro);
}
.encabezado-blanco h1::before {
margin-bottom: 20px;	
}

@media (max-width: 767px) {
	.encabezado-pagina h1::before {
		margin-bottom: 20px;
	}

	.encabezado-pagina p {
		margin-top: 20px;
	}

}
/* fin encabezado paginas internas */

/* ------------------------------------------------------------
   TIMELINE
   Un módulo de texto de WPBakery por hito, con la clase zz-timeline.
   Contenido esperado, en este orden exacto:
     <p>   año        -> se identifica por ser el primer elemento
     <h4>  título
     <p>   descripción
   Los tamaños coinciden con las clases txt24, txt32 y txt16 de la
   escala fluida.
   ------------------------------------------------------------ */

.zz-timeline {
	position: relative;
	margin-bottom: 0; /* anula el margen del módulo: la línea debe ser continua */
	padding-left: 80px; /* 32px de columna + 48px de separación (Figma) */
	padding-bottom: 56px;
}

/* Línea vertical verde */
.zz-timeline::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--zz-principal);
}

/*
 * Punto. El box-shadow dibuja un anillo del color del fondo que corta
 * la línea 10px por arriba y por abajo (y a los lados, donde no se ve).
 * Si el fondo de la sección no es blanco, hay que cambiar ese color.
 */
.zz-timeline::after {
	content: "";
	position: absolute;
	left: 12px;
	top: 10px;          /* antes 12px — ahora coincide con el radio del anillo */
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--zz-principal);
	box-shadow: 0 0 0 10px var(--zz-verde-claro);
}
/* Último hito: la línea se corta en el punto (opcional, ver nota) */
.zz-timeline.zz-timeline--fin::before {
	bottom: auto;
	height: 16px;
}

/* Año — Noto Serif 600 (hay que declararlo: un <p> hereda Inter del panel) */
.zz-timeline > .wpb_wrapper > p:first-child {
	margin: 0 0 8px;
	font-family: 'Noto Serif', serif;
	font-weight: 600;
	font-size: clamp(1.1875rem, 1.068rem + 0.532vw, 1.5rem); /* 19px -> 24px */
	line-height: 1.3;
	color: var(--zz-principal);
}

/* Título, con la línea divisoria inferior */
.zz-timeline h4 {
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--zz-gris-claro);
	font-size: clamp(1.4375rem, 1.222rem + 0.957vw, 2rem); /* 23px -> 32px */
	line-height: 1.3;
	color: var(--zz-negro);
}

/* Descripción */
.zz-timeline h4 + p {
	margin: 32px 0 0;
	font-size: clamp(0.9375rem, 0.916rem + 0.096vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-negro);
}

@media (max-width: 767px) {
	.zz-timeline {
		padding-left: 32px;
		padding-bottom: 40px;
	}

	.zz-timeline::before {
		left: 3px;
	}

	.zz-timeline::after {
		left: 0;
	}

	.zz-timeline h4 + p {
		margin-top: 20px;
	}
}
/* fin linea de tiempo */

/* ------------------------------------------------------------
   BOTÓN DE TEXTO
   Módulo de texto de WPBakery con la clase zz-boton-texto.
   Contenido esperado:
     <p>Texto ... <a href="...">enlace</a></p>
   El ::before del enlace se extiende sobre toda la caja, así que
   el recuadro entero es clicable. El ::after dibuja la flecha.
   ------------------------------------------------------------ */

.zz-boton-texto {
	position: relative; /* referencia para el enlace extendido */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	margin-top: calc(var(--zz-espacio-u) * 3); /* 30px -> 60px */
	margin-bottom: 0;
	padding: 8px 24px;
	border: 1px solid var(--zz-principal);
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

.zz-boton-texto:hover {
	background-color: var(--zz-gris-masclaro);
}

.zz-boton-texto > .wpb_wrapper {
	width: 100%;
}

.zz-boton-texto p {
	margin: 0;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-negro);
	text-align: center;
}


.zz-boton-texto a:hover,
.zz-boton-texto a:focus-visible {
	text-decoration: none;
}

/* Capa invisible que hace clicable todo el recuadro */
.zz-boton-texto a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}

/* Flecha */
.zz-boton-texto a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	margin-left: 24px;
	background-color: var(--zz-negro);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	text-decoration: none;
}


/* ------------------------------------------------------------
   CONTADOR
   Módulo contador de Ultimate Addons con la clase zz-contador.
   Estructura: .stats-number, .counter_suffix y .stats-text son
   hermanos dentro de .stats-desc.

   Con flex en fila + wrap, número y sufijo comparten línea
   (ej. "70%") y la etiqueta salta a la siguiente porque ocupa
   el 100% del ancho. El sufijo conserva la tipografía que le
   da el módulo.
   ------------------------------------------------------------ */

.zz-contador {
	padding-top: 8px;
	border-top: 1px solid var(--zz-principal);
	margin-bottom:24px!important;
}

/* El módulo reserva sitio para un icono que no usamos */
.zz-contador .aio-icon-top {
	display: none;
}

.zz-contador .stats-desc {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline; /* alinea el sufijo con la base del número */
	justify-content: flex-start;
}

/* Número */
.zz-contador .stats-number {
	font-family: 'Noto Serif', serif;
	font-weight: 600;
	font-size: clamp(1.875rem, 1.444rem + 1.915vw, 3rem) !important; /* 30px -> 48px */
	line-height: 1.2;
	color: var(--zz-negro);
	text-align: left;
}
/* Sufijo: misma tipografía y tamaño que el número */
.zz-contador .counter_suffix {
	font-family: 'Noto Serif', serif;
	font-weight: 600;
	font-size: clamp(1.875rem, 1.444rem + 1.915vw, 3rem) !important; /* 30px -> 48px */
	line-height: 1.2;
	color: var(--zz-negro);
}

/* Etiqueta (campo Título del módulo): ocupa todo el ancho y por
   tanto salta a la línea siguiente. */
.zz-contador .stats-text {
	width: 100%;
	margin: 8px 0 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem) !important; /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-negro);
	text-align: left;
}

/* ------------------------------------------------------------
   ENLACE CON ICONO
   Módulo Icon with text de The7 con la clase zz-link-con-icono.
   Los cuatro hijos (enlace de bloque, icono, título y descripción)
   son hermanos, así que se colocan con grid: texto en la columna 1
   e icono en la 2, ocupando las dos filas.
   ------------------------------------------------------------ */

.zz-link-con-icono {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 24px;
	column-gap: 24px;
	row-gap: 4px;
	align-items: start;
	padding: 16px 12px 16px 0;
	border-top: 1px solid var(--zz-gris-claro);
}

/* Cierra la lista con una línea al final */
.zz-link-con-icono:last-of-type {
	border-bottom: 1px solid var(--zz-gris-claro);
}

/* Capa que hace clicable todo el bloque */
.zz-link-con-icono .block-link {
	position: absolute;
	inset: 0;
}

/* Título */
.zz-link-con-icono .dt-text-title {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: clamp(1rem, 0.952rem + 0.213vw, 1.125rem); /* 16px -> 18px */
	line-height: 1.5;
	color: var(--zz-negro);
	transition: color 0.25s ease;
}

.zz-link-con-icono .dt-text-title a {
	color: inherit;
}

/* Descripción */
.zz-link-con-icono .dt-text-desc {
	grid-column: 1;
	grid-row: 2;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5;
	color: var(--zz-principal);
}

/* Icono, a la derecha y ocupando las dos filas */
.zz-link-con-icono .text-icon {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
}

/*
 * El módulo pinta dos iconos superpuestos (normal y hover) que The7
 * intercambia. Al cambiar su posicionamiento se veían los dos, así
 * que se oculta el de hover y se anima el normal.
 */
.zz-link-con-icono .text-icon .dt-hover-icon {
	display: none;
}

.zz-link-con-icono .text-icon i {
	display: inline-block;
	transform: rotate(45deg);
	font-size: 18px;
	line-height: 1;
	color: var(--zz-negro);
	transition: transform 0.25s ease;
}

/* --- Hover --- */
.zz-link-con-icono:hover .dt-text-title {
	color: var(--zz-principal);
}

.zz-link-con-icono:hover .text-icon i {
	transform: translate(3px, -3px) rotate(45deg);
}


/* ============================================================
   SINGLE POST
   ============================================================ */

/* ------------------------------------------------------------
   1. CABECERA
   El bloque .page-title (categorías, título, bajada, fecha y
   redes) va fuera de #main; la foto destacada, dentro del
   <article>.
   ------------------------------------------------------------ */

.single-post .page-title {
padding-top: calc(var(--zz-espacio-u) * 4); /* 40px -> 80px */
	padding-bottom: 0;
}

/*
 * The7 convierte el contenedor en flex en fila, lo que hace que el
 * bloque se encoja al ancho del título en vez de ocupar toda la
 * caja. Y .hgroup trae text-align:center, overflow:hidden y sus
 * propios márgenes, que también estorban.
 */
.single-post .page-title > .wf-wrap {
	display: block;
}

.single-post .page-title-head {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	text-align: left;
}

.single-post .page-title .entry-title {
	margin: 24px 0 0;
	font-weight: 600;
	font-size: clamp(1.875rem, 1.444rem + 1.915vw, 3rem); /* 30px -> 48px */
	line-height: 1.2;
	color: var(--zz-negro);
}

/* Bajada (extracto del post) */
.single-post .zz-bajada {
	margin: 24px 0 0;
	font-size: clamp(1rem, 0.952rem + 0.213vw, 1.125rem); /* 16px -> 18px */
	line-height: 1.5;
	color: var(--zz-gris);
}

/* ------------------------------------------------------------
   2. FECHA Y REDES
   ------------------------------------------------------------ */

.zz-meta-titular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin: 48px 0 0;
	padding: 16px 0;
	border-top: 1px solid var(--zz-gris-claro);
}

.zz-fecha {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5;
	color: var(--zz-gris);
}

.compartir-redes {
	display: flex;
	align-items: center;
	gap: 8px;
}

.compartir-redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border-radius: 64px;
	color: var(--zz-negro);
	font-size: 20px;
	line-height: 1;
	transition: color 0.2s ease-out;
}

.compartir-redes a:hover {
	color: var(--zz-principal);
}

/* ------------------------------------------------------------
   3. FOTO DESTACADA
   Arranca pegada a la línea del meta.
   ------------------------------------------------------------ */

.single-post #main {
	padding-top: 0 !important;
}

.single .post:not(.type-event) .post-thumbnail,
.single .single-postlike:not(.type-event) .post-thumbnail {
	margin-bottom: calc(var(--zz-espacio-u) * 5); /* 50px -> 100px */
}

.single-post .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ------------------------------------------------------------
   4. CUERPO
   Conviven contenidos del editor clásico (noticias antiguas) y
   de Gutenberg (nuevas), así que los selectores apuntan a los
   elementos HTML, no a las clases de bloque.

   Escala descendente completa de h2 a h6, para que el redactor
   pueda usar cualquier nivel sin que el resultado descuadre.

   IMPORTANTE: los márgenes laterales de los elementos deben
   quedar en auto para que el bloque de 768px siga centrado. Por
   eso se usan margin-top / margin-bottom por separado y nunca la
   forma abreviada, que pondría los laterales a cero.
   ------------------------------------------------------------ */

.single-post #main {
	padding-bottom: 0 !important;
}

.single-post .entry-content > * {
	width: 100%;
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .entry-content p {
	margin-top: 0;
	margin-bottom: 16px;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
	color: var(--zz-negro);
}

.single-post .entry-content mark {
	background: var(--zz-verde-claro) !important;
	color: var(--zz-negro) !important;
}

/* Encabezados */
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 {
	font-family: 'Noto Serif', serif;
	font-weight: 600;
	color: var(--zz-negro);
}

.single-post .entry-content h2 {
	margin-top: 24px;
	margin-bottom: 20px;
	font-size: clamp(1.4375rem, 1.222rem + 0.957vw, 2rem); /* 23px -> 32px */
	line-height: 1.3;
}

.single-post .entry-content h3 {
	margin-top: 24px;
	margin-bottom: 16px;
	font-size: clamp(1.25rem, 1.106rem + 0.638vw, 1.625rem); /* 20px -> 26px */
	line-height: 1.3;
}

.single-post .entry-content h4 {
	margin-top: 24px;
	margin-bottom: 16px;
	font-size: clamp(1.125rem, 1.029rem + 0.426vw, 1.375rem); /* 18px -> 22px */
	line-height: 1.4;
}

/* h5 equivale al párrafo destacado del diseño */
.single-post .entry-content h5 {
	margin-top: 20px;
	margin-bottom: 24px;
	font-size: clamp(1rem, 0.952rem + 0.213vw, 1.125rem); /* 16px -> 18px */
	line-height: 1.5;
}

.single-post .entry-content h6 {
	margin-top: 20px;
	margin-bottom: 16px;
	font-size: clamp(0.9375rem, 0.914rem + 0.106vw, 1rem); /* 15px -> 16px */
	line-height: 1.5;
}

/* Imágenes: sirve para <figure> clásico y para wp-block-image */
.single-post .entry-content figure {
	margin-top: 0;
	margin-bottom: 0;
	padding: 48px 0;
}

.single-post .entry-content figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* En galerías el espaciado lo lleva solo el contenedor */
.single-post .entry-content .wp-block-gallery figure {
	padding: 0;
}

.single-post .entry-content figcaption {
	margin-top: 8px;
	margin-bottom: 0;
	padding-left: 8px;
	border-left: 2px solid var(--zz-principal);
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5;
	color: var(--zz-gris);
	text-align: left;
}

/* Citas */
.single-post .entry-content blockquote {
	margin-top: 36px;
	margin-bottom: 36px;
	padding: 0 20px;
	background: none;
	border: 0;
	border-left: 2px solid var(--zz-principal);
	border-radius: 0;
}

.single-post .entry-content blockquote p {
	margin-top: 0;
	margin-bottom: 0;
	font-family: 'Inter', sans-serif;
	font-style: italic;
	font-size: clamp(1.0625rem, 0.991rem + 0.319vw, 1.25rem); /* 17px -> 20px */
	line-height: 1.4;
	color: var(--zz-negro);
}



/* Listas */
.single-post .entry-content ul,
.single-post .entry-content ol {
	margin-top: 30px;
	margin-bottom: 30px;
	padding-left: 50px;
	box-sizing: border-box;
}

.single-post .entry-content ul li,
.single-post .entry-content ol li {
	margin-bottom: 10px;
}

.single-post .entry-content ul li::marker {
	color: var(--zz-principal);
}

/* Vídeos incrustados (oEmbed del editor clásico) */
.single-post .entry-content iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ------------------------------------------------------------
   5. ETIQUETAS
   ------------------------------------------------------------ */

.single-post .post-meta {
	width: 100%;
	max-width: 768px;
	margin: 80px auto 0;
}

.single-post .entry-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 0;
	border-top: 1px solid var(--zz-gris-claro);
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem; /* 12px */
	line-height: 1.5;
	color: var(--zz-gris);
}

.single-post .entry-tags a {
	padding: 6px 8px;
	background: rgba(93, 93, 93, 0.1);
	border-radius: 8px;
	font-size: 0.75rem; /* 12px */
	line-height: 1.5;
	color: var(--zz-gris);
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.single-post .entry-tags a:hover {
	color: var(--zz-negro);
}

/* ------------------------------------------------------------
   6. CONTENEDOR
   Restaura el padding lateral de .wf-wrap, anulado por el
   <style id="the7-page-content-style">
   ------------------------------------------------------------ */

.single-post #main > .wf-wrap {
	padding-left: 50px;
	padding-right: 50px;
}

@media screen and (max-width: 992px) {
	.single-post #main > .wf-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ------------------------------------------------------------
   7. NOTICIAS RELACIONADAS
   El <aside> va dentro del <article>, tras el contenido, y lleva
   el fondo a ancho completo con la misma técnica que el bloque
   de beneficios (sin depender del JS de WPBakery).
   ------------------------------------------------------------ */

.zz-otras-noticias {
	display: block;
	margin-top: calc(var(--zz-espacio-u) * 5); /* 50px -> 100px */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: calc(var(--zz-espacio-u) * 5.6);    /* 56px -> 112px */
	padding-bottom: calc(var(--zz-espacio-u) * 5.6); /* 56px -> 112px */
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	background: var(--zz-verde-claro);
}

/* Sobre el fondo verde, las tarjetas van sin sombra (como en Figma) */
.zz-otras-noticias .classic-layout-list article.post {
	box-shadow: none;
}

.single-post .zz-otras-noticias .post-thumbnail img {
	border-radius:0px;
}

.zz-otras-noticias .wpb_content_element {
		margin-bottom: 0px;
	}
@media screen and (max-width: 991px) {
	.zz-otras-noticias .post-thumbnail-wrap{
		display:none;
	}
}
	@media screen and (max-width: 767px) {
	.zz-otras-noticias .default-btn-shortcode.btn-inline-right {
	float: none;
}

}















/* REPONSIVE GENERICOS */

/* usar preferente este bloque 767 para genericos */
@media screen and (max-width: 767px) {
	.zz-meta-titular {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	.fila-afiliate h2 {
		margin-left:20px!important;
	padding-bottom:20px;
	}
	.fila-afiliate p {
		margin-left:20px;
		padding-bottom:20px;
			
	}
	
.fila-afiliate .default-btn-shortcode.btn-inline-right {
		float: none;
	margin-left:20px;
	}
	
	
	
	.zz-footer-creditos__fila {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.zz-footer-redes {
		gap:24px;
	}

	.zz-footer-creditos__acciones {
		flex-direction: column;
		align-items: flex-start;
	}
	.zz-fila-invertir-movil {
		display: flex;
		flex-direction: column-reverse;
	}
	
}

@media (max-width: 480px) {
	
.fila-afiliate h2 {
		margin-left:12px !important;
	}
	.fila-afiliate p {
		margin-left:12px;
		margin-right:0px;
	}
	
.fila-afiliate .default-btn-shortcode.btn-inline-right {
		
	margin-left:12px;
	}
	
}