/*pricing*/

#planes { 
    padding: 80px 0; 
    background-color: #f9fafb; 
}

#planes .content .main-title {
	color: #00AFA7;
	font-weight: 500;
	font-size: 62.5px;
	line-height: 80px;
	text-align:center;
	margin-left: auto;
    margin-right: auto;
	max-width: 800px;
	margin-bottom: 30px;
}

#planes .content > p {
	color: #3C3C3B;
  	font-size: 1.2rem;
  	line-height: 1.7;
  	font-weight: 400;
    text-align: center;
  	margin-left: auto;
  	margin-right: auto;
  	max-width: 940px;
    margin-bottom: 60px;
}

#planes .section-subtitle { 
    font-size: 1.1rem; 
    text-align: center; 
    max-width: 700px; 
    margin: 0 auto 60px auto; 
    color: #555; 
}

#planes .pricing-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 30px; 
    max-width: 1100px; 
    margin: 0 auto; 
}
/* =========================================================================
   ESTILOS PARA DESTACAR EL PLAN DE PRECIOS
   ========================================================================= */

/* 1. Estilo base del plan destacado */
#planes .plan-destacado {
    /* * Usamos el color #00AFA7 que es el principal de tu web.
     * El borde actual es '1px solid #e5e7eb', así que este resaltará.
     */
    border: 3px solid #00AFA7 !important; 
    
    /* * Lo hacemos un 5% más grande que los demás.
     * Lo elevamos visualmente con z-index.
     */
    transform: scale(1.05);
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* 2. Etiqueta de "Recomendado" */
#planes .plan-destacado .recomendado-badge {
    position: absolute;
    top: -29px; /*-15px; /* Lo posiciona justo encima de la tarjeta */
    left: 50%;
    transform: translateX(-50%); /* Lo centra perfectamente */
    background-color: #00AFA7;
    color: #FFFFFF;
    padding: 6px 22px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
}

/* 3. Ajuste del 'hover'
   Tu CSS actual hace que las tarjetas se muevan 10px hacia arriba en hover.
   Este código evita que el plan destacado "salte" mal, 
   manteniéndolo escalado y solo aumentando un poco la sombra.
*/
#planes .plan-destacado:hover {
    transform: scale(1.05); /* Mantenemos la escala */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* Sombra más grande en hover */
}

@media (min-width: 768px) { 
#planes .pricing-grid { 
        grid-template-columns: repeat(4, 1fr); 
    } 
}

#planes .plan-card { 
    background-color: #FFFFFF; 
    border-radius: 12px; 
    padding: 40px 20px; /*40px;*/ 
    text-align: center; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    border: 1px solid #e5e7eb; 
    transition: transform 0.3s, box-shadow 0.3s; 
}

#planes .plan-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
}

#planes .plan-card h3 { 
    font-size: 1.5rem; 
    font-weight: 600; 
    margin-top: 0;

    min-height: 58px;
}

#planes .plan-card .plan-ideal { 
    color: #0d9488; 
    font-weight: 500; 
    margin-bottom: 20px;
    min-height: 48px;
}

#planes .plan-card .plan-price { 
    font-size: 3rem; 
    font-weight: 700; 
    color: #1f2937; 
    margin-bottom: 5px; 
}

#planes .plan-card .plan-price span { 
    font-size: 1rem; 
    font-weight: 400; 
    color: #555; 
}

#planes .plan-card .plan-anual { 
    color: #555; 
    margin-bottom: 30px; 
}

#planes .plan-features { 
    list-style: none; 
    padding: 0; 
    margin-bottom: 30px; 
    text-align: left; 
}

#planes .plan-features li { 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center;

    min-height: 48px;
}

#planes .plan-features .bi-check { 
    color: #10b981; 
    margin-right: 10px; 
    font-size: 1.2rem; 
}

#planes .plan-features .bi-x { 
    color: #ef4444; 
    margin-right: 10px; 
    font-size: 1.2rem; 
}

#planes .plan-card .btn { 
    background-color: #0d9488; 
    color: #FFFFFF; 
    text-decoration: none; 
    padding: 15px 20px; 
    border-radius: 8px; 
    font-weight: 600; 
    display: block; 
}

/*pricing*/

@media (max-width: 1100px) {

    /* plan de precios */
    #planes .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #planes .plan-card h3 {
        min-height: 0;
    }

    #planes .plan-card .plan-ideal {
        min-height: 0;
    }

    #planes .plan-features li {
        min-height: 0;
    }

    #planes .plan-destacado .recomendado-badge {
        top: -18px;
    }
}

@media (max-width: 992px) {
    /* plan de precios */
    #planes .pricing-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 768px) {
 
  		/* planes */
	#planes {
    	padding-top: 65px;
    	padding-bottom: 65px;
  	}

	#planes .content .main-title {
    	font-size: 36px;
    	line-height: 43px;
    	margin-bottom: 35px;
  	}

  	#planes .content {
  		font-size: 18px;
    	line-height: 24px;
    }

    #planes .content ul {
  		padding-left: 35px;
	}

	#planes .content .bottom p {
  		margin-bottom: 25px;
	}

	#planes .content .bottom .bottom-left {
  		padding-top: 20px;
	}
	
  	/* fin planes */ 	

}
/* =========================================================================
   ESTILOS CORREGIDOS PARA #comparation (FONDO VERDE CLARO Y BARRA VERDE INFERIOR)
   ========================================================================= */

#comparation {
    position: relative;
    padding: 80px 0;
    /* 1. Fondo verde claro (#f9fafb) y barra verde inferior */
    background-color: #f9fafb; /* Este es el color del fondo claro de tu home */
    border-bottom: 4px solid #00AFA7; /* La barra verde más oscura abajo */
}

#comparation .layer-green {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: 50% center;
    background-image: url('../images/layer-green.png')
}

#comparation .container {
	position: relative;
	height: 100%; 
}

#comparation .backgrouund-image {
	position: absolute;
	bottom: 0;
	left: 73px; /*57px;*/
}


/* 3. Estilo para el contenedor .content (lo centramos) */
#comparation .content {
    max-width: 1048px;
    margin: 0 auto;
    /*padding: 0 20px;*/
    position: relative;
    z-index: 2;
}



/* 4. Título principal de la sección */
#comparation .content .main-title {
    color: #00AFA7;
    font-weight: 500;
    font-size: 62.5px;
    line-height: 80px;
    text-align: center;
    margin-bottom: 60px;
}

/* 5. Títulos de las columnas: "Vetercheck" y "Otros competidores" */
#comparation .comparation-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #3C3C3B;
    margin-bottom: 25px;
}

/* 6. Estilos para la lista de características (.plan-features) */
#comparation .plan-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}

#comparation .plan-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center; /*flex-start;*/
    color: #3C3C3B;
    font-weight: 500;

    min-height: 48px;
}

#comparation .plan-features li:last-child {
    margin-bottom: 0;
}

/* 7. Estilos de los iconos (ya estaban bien) */
#comparation .plan-features .bi-check {
    color: #10b981;
    margin-right: 10px;
    font-size: 1.2rem;
    flex-shrink: 0;
    /*margin-top: 3px;*/
}

#comparation .plan-features .bi-check::before {
    vertical-align: baseline;
}

#comparation .plan-features .bi-x {
    color: #ef4444;
    margin-right: 10px;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 3px;
}

/* =========================================================================
   MEDIA QUERIES (LIMPIAS)
   ========================================================================= */

@media (max-width: 991px) {
    #comparation .comparation-column + .comparation-column {
        margin-top: 50px;
    }

    #comparation .plan-features li {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    #comparation .content .main-title {
        font-size: 36px;
        line-height: 43px;
    }

    #comparation .comparation-title {
        font-size: 1.5rem;
    }
}