/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.ast-container #primary{
margin:0px;}

.site-below-footer-wrap{
	padding-bottom:80px;
}

body {
    margin: 0;
    padding: 0;
}



body.home .page.type-page.status-publish {
    padding-top: 0;
}
/* Elimina margen superior extra si existiera */
.post.type-post.status-publish.format-standard.ast-article-single {
  margin-top: 0 !important;
}

/* Cabecera full width */
.mi-cabecera {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;  /* Mitad del viewport */
    margin-right: -50vw;
    width: 100vw;        /* Ancho del viewport */
    max-width: 100vw;
}
body.single-post .ast-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
/* Capa oscura encima de la imagen */
.mi-cabecera-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);

  display: flex;
  align-items: flex-end; /* Texto abajo */
  justify-content: center; 

  box-sizing: border-box;
}

/* Contenedor interno (texto centrado) */
.mi-cabecera-inner {
  max-width: 1200px; /* ancho máx. de tu texto */
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* Título en blanco */
.page-title-white {
  color: #fff;
  margin: 0;
}

.container {
    width: 60%;
    text-align: center;
}


/*Actualización*/
.actualizacion {
	text-align: right;
}


/*Fichas */
.ficha-general {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*Ficha*/

.ficha-item {
    display: grid;
    grid-template-columns: 1fr 3fr; 
    grid-template-rows: auto; 
    grid-template-areas: 
        "imagen titulo"
        "imagen info"; 
    grid-gap: 20px; 
	margin-top: 20px;
    padding: 16px;
    border-radius: 8px; 
    background-color: #ffffff;
    box-shadow: 0 0 20px 6px rgb(184 190 195 / 45%);
    border: 1px solid #e0e0e0; 
    transition: box-shadow 0.3s ease; 
	position:relative;
	overflow: hidden;
}


.ficha-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}
/*Verificar*/
li.verificado_toc {
    box-shadow: inset 0 0 9px 2px rgba(34, 113, 177)!important;
}

.ficha-item .verificar-link {
    position: absolute;
    top: 84px;
    left: -44px;
    right: 0;
    height: 50px;
    background-color: #313d43;
    color: #ffffff;
    line-height: 50px;
    font-size: 13px;
    text-transform: uppercase;
    transform: rotate(-45deg);
    transform-origin: top left;
    width: 15%;
    text-align: center;
    display: block;
	
}


.ficha-item .nombre {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

div.verificar-b {
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 21px;
    background-color: #2271B1;
    color: #ffffff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: auto;
}
a.verificar-boton {
    color: #ffffff;
}
div.verificar-b:hover {
    background-color: #02477f;
}



/* Variantes*/
.ficha-item.verificada, .ficha-item.verificada_g {
	box-shadow: 0 0 20px 6px rgba(34, 113, 177);
}
.ficha-item.verificada::before ,.ficha-item.verificada_g::before {
    content: "Verificado";
    position: absolute;
    top: 84px;
    left: -44px;
    right: 0;
    height: 50px;
    background-color: #2271b1;
    color: #ffffff;
    line-height: 50px;
    font-size: 16px;
    text-transform: uppercase;
    transform: rotate(-45deg);
    transform-origin: top left;
    width: 15%;
    text-align: center;
}

.ficha-item.dest {
    box-shadow: 0 2px 10px #FFD700;
}
.ficha-item.dest::before {
    content: "TOP";
	background-color:  #FFD700;
	font-weight:bold;
}


/*Imagen*/
.ficha-imagen {
    grid-area: imagen; 
	margin-bottom: 20px;
}


.ficha-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 20px;
}

.img-ficha {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.datos {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
	margin-bottom:10px;
}

a.boton-visitar-web {
    background-color: var(--ast-global-color-0);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s; 
}
.datos .boton-visitar-web{width: 100%;}

.boton-visitar-web:hover {
    background-color: --ast-global-color-2; 
    color: #ffffff; 
}

.boton-visitar-web {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10px 0;
}

.boton-visitar-web i {
    margin-right: 8px;
}

/* Redes Sociales*/
.redes-sociales {
    display: flex;
    align-items: left;
    gap: 15px;
	justify-content: left;
}

.redes-sociales a {
    display: inline-flex;
    align-items: center;
	font-size:25px;
}

.redes-sociales a[href*="facebook.com"] .fab.fa-facebook-square {
    color: #3b5998;
}

.redes-sociales a[href*="instagram.com"] .fab.fa-instagram {
    color: #E1306C;
}

.redes-sociales a[href*="linkedin.com"] .fab.fa-linkedin {
    color: #0077b5;
}

.redes-sociales a[href*="youtube.com"] .fab.fa-youtube {
    color: #FF0000;
}

.redes-sociales a[href*="twitter.com"] .fab.fa-twitter {
    color: #1DA1F2;
}
.redes-sociales a[href*="x.com"] .fab.fa-twitter {
    color: #1DA1F2;
}

.redes-sociales a[href*="tiktok.com"] .fab.fa-tiktok {
    color: #000000;
}











/* Título */
.ficha-titulo {
    grid-area: titulo; 
}
.numero-ficha {
    color: var(--ast-global-color-0); 
}
.ficha-titulo h2 {
    font-size: 25px; /* Ajusta según necesidad */
    line-height: 1.2; /* Ajusta para controlar el espaciado entre líneas */
    color: #333;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el texto a mostrar máximo dos líneas */
    -webkit-box-orient: vertical;
    max-height: 60px; /* Ajusta basado en el tamaño de la fuente y el line-height */
}

/* Estrellas */
.review-stars {
    display: flex;
    gap: 5px;
    font-size: 20px;
    
}


.star {
    color: #bbb;
}

.star.filled {
    color: #FFD700;
}



/* Info */
.ficha-info {
    grid-area: info; 
}


/* Servicios */
.servicios ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
	margin:15px auto 15px auto;
}

.servicios ul li {
    background-color: transparent; 
    color: var(--ast-global-color-0); 
    border: 1px solid var(--ast-global-color-0); 
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 14px; 
    cursor: default; 
}

/* Botón Ver más */
.ver-mas {
    background-color: transparent;
    color: var(--ast-global-color-0);
    padding: 6px 12px;
    border: 1px solid var(--ast-global-color-0);
    border-radius: 20px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.ver-mas:hover {
    background-color: var(--ast-global-color-0);
    color: #ffffff;
}



.collapsed-content, .collapsed {
    display: none;
}

.expanded {
    display: block;
}

.descripcion h4{
	font-size: 15px;
    padding-bottom: 10px;
}
.resumen-opiniones{
	margin-bottom:20px;
}
.resumen-opiniones h4{
	font-size: 15px;
}

/* Otros */
.formulario{
	margin-top:30px;
	background: #F7F3F5;
    padding: 20px;
	border-radius: 20px;
    border: 1px solid #ccc;
}
.mobile-whatsapp-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #f7f7f7 !important;
    padding: 10px 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}


.whatsapp-button, .contact-button {
    display: flex;
    align-items: center;
}

.contact-button {
    padding: 10px 20px;
    background-color: var(--ast-global-color-0);
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease; 
	
}
.ficha-imagen .contact-button{
	width:100%;
}

a.contact-button:hover{
    background-color: var(--ast-global-color-0);
	color:white!important;
}

/*Estilo Whatsapp*/
i.fab.fa-whatsapp-square {
    color: #32D951!important;
    font-size: 23px;
}

/*Bloque estadisticas*/

.estadisticas-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    margin-top: 30px;
    gap: 20px; 
}

.estadistica-bloque {
    padding: 16px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.3s ease;
    flex-basis: calc(20% - 20px); 
    margin-top: 20px; 
    position: relative; 
}

.estadistica-bloque:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.icono-estadistica {
    font-size: 40px;
    color: var(--ast-global-color-0);
}

.estadistica-bloque span {
    display: block;
    font-weight: 700;
    margin-top: 10px;
    font-size: 24px;
    color: #333;
}

.estadistica-bloque p {
    font-size: 14px;
    color: #666;
}


	
/*Bloque TOC*/
.toc-contenedor {
    text-align: center;
    margin: 20px auto;
    width: 60%;
	gap:10px;
}

.toc-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    
}

.toc-lista a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	color: var(--ast-global-color-1);
}


.toc-lista.toc-pedestal li, .toc-lista.toc-general li {
    padding: 2px 0px 2px 15px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0; 
    transition: box-shadow 0.3s ease; 
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-top: 10px; 
}

.toc-lista.toc-pedestal li:hover, .toc-lista.toc-general li:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.toc-lista.toc-pedestal li:nth-child(1) {
    border: 2px solid #ffd700; 
}

.toc-lista.toc-pedestal li:nth-child(2) {
    border: 2px solid #c0c0c0; 
}

.toc-lista.toc-pedestal li:nth-child(3) {
    border: 2px solid #cd7f32; 
}

.toc-lista.toc-general {
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: space-around; 
}

.toc-lista.toc-general li {
    width: calc(50% - 10px); 
    justify-content: flex-start; 
}



.toc-numero {
    margin-right: 5px;
}

.toc-lista a {
    text-decoration: none;
    display: block;
}

/* === PATCH TOC · 100 % clicable + ellipsis ============================== */

/* 1. El enlace llena todo el <li> y permite que el texto se contraiga */
.toc-link,
.toc-lista li > a{
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;          /* ¡clave para que aparezca el “…”! */
}

/* 2. Alineación: Top-3 centrado, resto a la izquierda */
.toc-lista.toc-pedestal li > a{ justify-content: center;  text-align: center; }
.toc-lista.toc-general  li > a{ justify-content: flex-start; text-align: left; }

/* 3. Título con truncado y “…” */
.toc-titulo{
    flex: 1 1 auto;        /* ocupa el espacio restante */
    min-width: 0;          /* permite encogerse dentro de flex */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* muestra los tres puntos */
}



.fa-crown {
    margin-right: 5px;
}

.corona-oro { color: #ffd700; }
.corona-plata { color: #c0c0c0; }
.corona-bronce { color: #cd7f32; }


/*Custom list*/
.custom-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.custom-list li {
    flex: 1 1 calc(25% - 10px); /* Por defecto, 4 columnas */
    color: white;
    padding: 10px 10px;
    margin: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: #2980b9;
    transition: background-color 0.3s ease;
}
.custom-list li a {
    color: white;
}

.custom-list li:hover {
    background-color: #d90700a3;
}
.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.grid-item {
    flex: 0 1 300px!important; 
    margin: 10px;
    box-shadow: 0 0 8px #ccc;
    overflow: hidden;
}

.grid-item h3 {
    text-align: center;
    font-size: 1.3em;
	margin:10px;
}

.img-responsive {
    width: 100%;
    height: auto;
    display: block;
}
.grid-item {
        flex-basis: 100%;
    }



/* FAQs */
/* Estilos para la sección de FAQs */
.faq-section {
    margin-top: 40px;
}

.faq-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.faq-container {
    border-top: 1px solid #ccc;
}

.faq-item {
    border-bottom: 1px solid #ccc;
}

.faq-question {
    cursor: pointer;
    padding: 15px;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
}

.faq-question i {
    margin-right: 10px;
    transition: transform 0.3s;
}

.faq-question.active i {
    transform: rotate(45deg);
}

.faq-answer {
    display: none;
    padding: 15px;
    background-color: #f9f9f9;
}

/* Estilos para móviles */

@media only screen and (max-width: 1254px) {
	    .container {
        width: 90%;
    }

    .custom-header {
        height: 200px;
    }

    .custom-list li {
        flex: 1 1 100%;
    }

    .grid-container .grid-item {
        flex: 0 1 100%!important;
    }
	
 
	
	.actualizacion {
		font-size:15px;
	}
	.estadisticas-contenedor{
		 gap:0px;
	} 
	.estadistica-bloque {
        flex-basis: calc(50% - 10px); 
		
    }
	.estadistica-bloque p{
        font-size: 12px;
    }
    .ficha-item {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "titulo"
            "imagen"
            "info";
		grid-gap:0px;
    }
	   .ficha-item.verificada::before,.ficha-item.verificada_g::before, .ficha-item.dest::before {
		top: 0px;
		left: 0px;
		width: 100%;
		font-size: 12px;
		transform:none;
    }
	   .ficha-item .verificar-link {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto; 
        background-color: #313d43; 
        color: #ffffff;
        line-height: normal; 
        font-size: 12px;
        text-transform: uppercase;
        transform: none; 
        text-align: center;
        display: block;
        padding: 10px 0; 
    }
	
	  .ficha-item .nombre {
        flex-direction: column; 
        align-items: flex-start; 
    }

    .ficha-item .verificar-boton {
        margin: 5px auto 5px auto; 
    }
	
	 .ficha-titulo {
        order: 1; 
    }

    .ficha-imagen {
        order: 2; 
		margin:10px auto 0px auto;
    }

    .ficha-info {
        order: 3; 
    }
	.ficha-titulo-header{
		display:flex;
		flex-direction:column;
	}
	.review-stars{
		order:1;
		justify-content: right;
		
	}
	.nombre{
		order:2;
	}
	.direccion{
		display:flex;
		order:3;
	}
	.ficha-titulo h2{
		font-size:20px;
		margin:15px 0px 10px 0px;
	}
	.ficha-item.verificada .ficha-titulo,.ficha-item.verificada_g .ficha-titulo, .ficha-item.dest .ficha-titulo{
		margin-top:40px;
		
	}
	.ficha-item.nverificada .ficha-titulo{
		margin-top:10px;
		
	}

	.toc-contenedor {
		margin: 10px;
		width:90%;
	}
    .toc-lista.toc-general li {
        width: 100%; 

		margin: 5px 0 5px 0;

    }



	  .ficha-item.verificada::before,.ficha-item.verificada_g::before, .ficha-item.dest::before {
		top: 0px;
		left: 0px;
		width: 100%;
		font-size: 12px;
		transform:none;
    }
	

	.ficha-titulo h2{
		font-size:20px;
		margin:10px auto 10px auto;
	}
	.ficha-item .ficha-titulo,  .ficha-item .ficha-imagen {
		margin-top:40px;
		
	}
	
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .container {
        width: 80%;
    }


    .custom-header {
        height: 250px;
    }

    .custom-list li {
        flex: 1 1 calc(50% - 10px);
    }

    .grid-container .grid-item {
        flex: 0 1 45%!important;
    }
}

@media only screen and (min-width: 1025px) {
    .container {
        width: 60%;
    }

    .grid-container .grid-item {
        flex: 0 1 300px!important;
    }
}


/*Estilos Precios*/
/* Título principal */
h2.title {
	text-align: center;
	font-size: 36px;
	margin: 20px 0;
	color: #0a3044;
	font-weight: 700;
}

/* Contenedor de tarjetas de precios */
.table-container {
	display: flex;
	justify-content: center;
	align-items: stretch;
	padding: 20px;
	flex-wrap: wrap;
}

/* Tarjetas de precios */
.pricing-card {
	width: 320px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 30px 20px;
	text-align: center;
	margin: 10px;
	position: relative;
	transition: box-shadow 0.3s;
	display: flex;
	flex-direction: column;
}

.pricing-card:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Títulos de los planes */
.pricing-card .plan-title {
	font-size: 28px;
	margin-top: 10px;
	font-weight: 700;
}

.pricing-card .plata-title {
	color: #A8A9AD; /* Color plata */
}

.pricing-card .oro-title,
.pricing-card .diamante-title {
	color: #0a3044; /* Mismo color para Mensual y Anual */
}

.pricing-card .subtitle {
	font-size: 18px;
	color: #555;
	margin-bottom: 20px;
	font-weight: 400;
}

/* Precio nuevo (tamaño reducido) */
.pricing-card .price {
	font-size: 34px;
	color: green;
	font-weight: 700;
	margin-bottom: 10px;
}

/* Precio antiguo */
.pricing-card .old-price {
	font-size: 18px;
	color: #333;
	margin-bottom: 10px;
}

/* Prueba gratuita de 7 días */
.pricing-card .free-trial {
	color: green;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 20px;
}

/* Botones de acción */
.pricing-card .btn {
	display: inline-block;
	margin-bottom: 20px;
	padding: 14px 28px;
	background-color: #0a89d2; 
	color: #fff;
	text-align: center;
	border-radius: 30px;
	text-decoration: none!important;
	font-weight: 700;
	transition: background-color 0.3s ease;
	font-size: 16px;
}

.pricing-card .btn:hover {
	background-color: #007bb5;
	color: #fff;
	text-decoration: none; 
}

/* Características */
.pricing-card .features {
	text-align: left;
	font-size: 16px;
	margin: 0;
	list-style: none;
	padding-left: 0;
	color: #333;
	flex-grow: 1;
}

.pricing-card .features li {
	margin: 10px 0;
	line-height:22px;
	display: flex;
	align-items: center;
}

.pricing-card .features li i {
	margin-right: 10px;
}

/* Sección de bonos */
.bonus-section {
	background-color: #f9f9f9;
	padding: 15px;
	border-radius: 8px;
	margin-top: 0;
	text-align: left;
}

.bonus-section h4 {
	margin-bottom: 10px;
	color: #0a3044;
	font-size: 18px;
	font-weight: 600;
}

.bonus-section p {
	font-size: 16px;
	line-height:22px;
	margin: 5px 0;
	color: #555;
	display: flex;
	align-items: center;
}

.bonus-section p i {
	color: #ff9800;
	margin-right: 10px;
}

/* Etiqueta de "Más Popular" */
.badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #0a89d2;
	color: #fff;
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
}

/* Estilo especial para el plan recomendado */
.premium-plan {
	border: 2px solid #0a89d2;
}

/* Responsividad */
@media (max-width: 768px) {
	.table-container {
		flex-direction: column;
		align-items: center;
	}
	.pricing-card {
		width: 100%; 
		margin: 20px 0; 
	}
	.pricing-card .plan-title {
		font-size: 24px; 
	}
	.pricing-card .price {
		font-size: 20px; 
	}
	.pricing-card .features li {
		font-size: 14px; 
	}
	.pricing-card .btn {
		padding: 12px 24px; 
		font-size: 14px; 
	}
}


/*Modal*/
/* Overlay del modal centrado */
.modal-contacto {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  display: none; /* Se mostrará con JS (display: flex) */
  align-items: center;
  justify-content: center;
}

/* Contenido del modal */
.modal-contacto .modal-content {
  background: #fff;
  border-radius: 10px;
  padding: 30px 40px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Título del modal */
.modal-header .modal-title {
  font-size: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

/* Lista de datos de contacto */
.modal-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modal-contact-list li {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin: 8px 0;
  color: #333;
}
.modal-contact-list li i {
  margin-right: 10px;
  font-size: 18px;
  color: #2271B1;
}

/* Redes Sociales */
.modal-rrss {
  margin-top: 15px;
  text-align: center;
}
.modal-rrss a {
  margin: 0 5px;
  font-size: 22px;
}

/* Área de anuncio */
.modal-ad-area {
  margin: 20px 0;
  text-align: center;
}

/* Pie del modal (botón cerrar centrado) */
.modal-footer {
  text-align: center;
  margin-top: 20px;
}
.modal-footer button {
  padding: 10px 20px;
  border: none;
  background: #2271B1;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}
.modal-footer button:hover {
  background: #005f8a;
}

.ver-email-link,
.ver-tel-link {
  font-size: 0.9em;
  color: #2271B1;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, transform 0.3s ease, border-bottom-color 0.3s ease;
}

.ver-email-link:hover,
.ver-tel-link:hover {
  color: #005f8a;
  border-bottom-color: #005f8a;
  transform: scale(1.02);
}



/* Estilos para el botón de contacto en la ficha */
.contacto-button {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #2271B1;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background 0.3s;
}
.contacto-button:hover {
  background: #f0f0f0;
}


/* =============== CUSTOM POST GRID (Apple-like minimal) =============== */
.custom-post-grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr); 
	gap: 20px;
	margin: 40px 0;
}

.custom-post-grid-item {
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	overflow: hidden; 
	box-shadow: 0 0 4px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

.custom-post-grid-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Enlaces y títulos sin subrayado */
.custom-post-link,
.custom-post-link:visited,
.custom-post-link:hover,
.custom-post-link:focus {
	text-decoration: none !important;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.custom-post-img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	transition: transform 0.5s ease;
	display: block;
}

/* Efecto zoom al hover sobre el contenedor */
.custom-post-grid-item:hover .custom-post-img {
	transform: scale(1.05);
}

.custom-post-title {
	font-size: 0.95rem; /* Título más pequeño y minimalista */
	margin: 10px;
	text-align: center;
	color: #333;
	line-height: 1.4;
	text-decoration: none !important;
}

/* == Responsivo == */
@media (max-width: 1024px) {
	.custom-post-grid-container {
		grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablet */
	}
}

@media (max-width: 600px) {
	.custom-post-grid-container {
		grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
	}
	.custom-post-title {
		font-size: 0.9rem;
		margin: 8px;
	}
}